portfolio-design-system
Use when designing, reviewing, or refining the portfolio visual system, including dark/light theme, deep-purple visual identity, responsive layouts, premium UI, animation, motion, component styling, visual hierarchy, mobile UX, and design QA.
Install
mkdir -p .claude/skills/portfolio-design-system && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13580" && unzip -o skill.zip -d .claude/skills/portfolio-design-system && rm skill.zipInstalls to .claude/skills/portfolio-design-system
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when designing, reviewing, or refining the portfolio visual system, including dark/light theme, deep-purple visual identity, responsive layouts, premium UI, animation, motion, component styling, visual hierarchy, mobile UX, and design QA.About this skill
Portfolio Design System
Core Rule
Design for a premium enterprise portfolio, not a generic developer template. Dark theme is default. Light theme must be equally polished. Purple is a controlled identity accent, not the whole palette.
First Files To Read
From repository root:
portfolio-content/strategy/visual-theme-design-system.mdportfolio-content/strategy/website-theme-layout.mddevelopment-ready/page-component-specification.mddevelopment-ready/animation-interaction-specification.mddevelopment-ready/resources-and-assets-plan.md
Visual Direction
Use:
- Executive Dark by default.
- Studio Light as alternate.
- black, graphite, white, and soft gray as foundation.
- deep purple for identity, active states, focus, featured work, AI/plugin emphasis.
- blue for architecture/integration/data.
- green for verified outcomes.
- amber for needs-confirmation.
Avoid:
- purple-heavy gradients.
- decorative blobs or orbs.
- nested cards.
- low contrast.
- oversized hero type inside compact panels.
- animation that delays reading.
Layout Rules
- Use a 12-column desktop grid.
- Use single-column mobile layout.
- Keep case-study reading width 760 to 900 px.
- Keep cards stable and scannable.
- Keep text inside buttons and cards readable.
- Convert diagrams to vertical steps on mobile.
Motion Rules
Use motion for hierarchy and feedback:
- hero entrance
- card reveal
- filter transitions
- theme toggle
- architecture step highlight
- mobile menu
Avoid:
- scroll-jacking
- typewriter effects
- bouncing cards
- particle fields
- animated cursors
- rotating cards
References
Read references/design-review-checklist.md for visual QA.