lunartech-x/Timeline & Process Flows
skills/design-and-media/ui-ux/design-skills/timeline-process-flows/SKILL.md
Visualize step-by-step processes and progressive workflows
$ install --global
skillsauthnpx skillsauth add lunartech-x/superpowers Timeline & Process FlowsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 10:07 PM23.5s1 file scanned
SKILL.md
- name:
- Timeline & Process Flows
- description:
- Visualize step-by-step processes and progressive workflows
Timeline & Process Flows
Create visual representations of sequential processes, timelines, and progressive workflows.
Horizontal Step Flow
<div class="flex items-center justify-between gap-4">
<!-- Step 1 -->
<div class="flex-1 text-center group-hover:translate-y-[-4px] transition-transform duration-300">
<div class="w-14 h-14 mx-auto rounded-2xl bg-emerald-50 border border-emerald-100
flex items-center justify-center mb-2
group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-emerald-600"><!-- Icon --></svg>
</div>
<p class="text-[10px] font-semibold text-zinc-700">Step Name</p>
<p class="text-[9px] text-zinc-400">Subtitle</p>
</div>
<!-- Arrow -->
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-zinc-300">
<path d="M5 12h14m-7-7 7 7-7 7" />
</svg>
</div>
<!-- Step 2 -->
<div class="flex-1 text-center group-hover:translate-y-[-4px] transition-transform duration-300 delay-100">
<!-- Similar structure -->
</div>
<!-- Arrow -->
<!-- Step 3, etc. -->
</div>
Staggered Animation
Add delays to each step for sequential reveal:
<div class="transition-transform duration-300">Step 1</div>
<div class="transition-transform duration-300 delay-100">Step 2</div>
<div class="transition-transform duration-300 delay-200">Step 3</div>
<div class="transition-transform duration-300 delay-300">Step 4</div>
Vertical Timeline
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-brand-500 flex items-center justify-center">
<span class="text-white font-medium">1</span>
</div>
<div class="w-0.5 h-full bg-white/10 my-2"></div>
</div>
<div class="pb-8">
<h4 class="text-white font-medium">Step Title</h4>
<p class="text-white/60 text-sm">Description of this step.</p>
</div>
</div>
<!-- More steps -->
</div>
Icon Color by Stage
<!-- Early stage: Emerald -->
<div class="bg-emerald-50 border-emerald-100">
<svg class="text-emerald-600">
<!-- Mid stage: Blue -->
<div class="bg-blue-50 border-blue-100">
<svg class="text-blue-600">
<!-- Late stage: Amber -->
<div class="bg-amber-50 border-amber-100">
<svg class="text-amber-600">
<!-- Final stage: Rose -->
<div class="bg-rose-50 border-rose-100">
<svg class="text-rose-600">
Data Flow Visualization
<div class="space-y-4">
<!-- Input -->
<div class="flex items-center gap-4">
<span class="w-20 text-right text-white/30 text-xs font-mono">INPUT</span>
<div class="flex-1 flex gap-2">
<div class="flex-1 h-10 rounded-lg bg-blue-500/20 border border-blue-500/30
flex items-center justify-center">
<span class="text-blue-400 text-xs">Data A</span>
</div>
<div class="flex-1 h-10 rounded-lg bg-emerald-500/20 border border-emerald-500/30
flex items-center justify-center">
<span class="text-emerald-400 text-xs">Data B</span>
</div>
</div>
</div>
<!-- Arrow -->
<div class="flex justify-center">
<svg class="text-brand-400 animate-bounce">
<path d="M12 5v14m7-7-7 7-7-7" />
</svg>
</div>
<!-- Process -->
<div class="flex items-center gap-4">
<span class="w-20 text-right text-white/30 text-xs font-mono">PROCESS</span>
<div class="flex-1 h-16 rounded-xl bg-gradient-to-r from-brand-500/20 to-purple-500/20
border border-brand-500/30 flex items-center justify-center">
<span class="text-brand-300 font-medium">Processing Step</span>
</div>
</div>
<!-- Arrow -->
<div class="flex justify-center">
<svg class="text-emerald-400 animate-bounce" style="animation-delay: 0.5s;">
<path d="M12 5v14m7-7-7 7-7-7" />
</svg>
</div>
<!-- Output -->
<div class="flex items-center gap-4">
<span class="w-20 text-right text-white/30 text-xs font-mono">OUTPUT</span>
<div class="flex-1 h-14 rounded-xl bg-emerald-500/10 border border-emerald-500/30
flex items-center justify-center gap-3">
<svg class="text-emerald-400"><!-- Check icon --></svg>
<span class="text-emerald-300 font-medium">Result</span>
</div>
</div>
</div>
Shimmer Loading Effect
<div class="relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"
style="animation: shimmer 2s infinite;"></div>
</div>
<style>
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
</style>
Related Skills
lunartech-x/anndata
tools
VerifiedTrustedCommunity
Data structure for annotated matrices in single-cell analysis. Use when working with .h5ad files or integrating with the scverse ecosystem. This is the data format skill—for analysis workflows use scanpy; for probabilistic models use scvi-tools; for population-scale queries use cellxgene-census.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alphafold-db
testing
VerifiedTrustedCommunity
Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alpha-vantage
development
VerifiedTrustedCommunity
Access real-time and historical stock market data, forex rates, cryptocurrency prices, commodities, economic indicators, and 50+ technical indicators via the Alpha Vantage API. Use when fetching stock prices (OHLCV), company fundamentals (income statement, balance sheet, cash flow), earnings, options data, market news/sentiment, insider transactions, GDP, CPI, treasury yields, gold/silver/oil prices, Bitcoin/crypto prices, forex exchange rates, or calculating technical indicators (SMA, EMA, MACD, RSI, Bollinger Bands). Requires a free API key from alphavantage.co.
14SKILL.mdUpdated May 16, 2026
lunartech-x/aeon
development
VerifiedTrustedCommunity
This skill should be used for time series machine learning tasks including classification, regression, clustering, forecasting, anomaly detection, segmentation, and similarity search. Use when working with temporal data, sequential patterns, or time-indexed observations requiring specialized algorithms beyond standard ML approaches. Particularly suited for univariate and multivariate time series analysis with scikit-learn compatible APIs.
14SKILL.mdUpdated May 16, 2026