portfolio-design-system
Enforces a design system for enterprise portfolios, covering dark/light themes, typography, motion, and component hierarchy.
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.Key capabilities
- →Design for a premium enterprise portfolio.
- →Apply a dark theme by default, with an equally polished light theme.
- →Use deep purple for identity, active states, and featured work.
- →Implement a 12-column desktop grid and single-column mobile layout.
- →Use motion for hierarchy and feedback, such as hero entrance and card reveal.
How it works
This skill applies a structured design system to portfolio elements, enforcing specific visual directions, layout rules, and motion principles to achieve a premium aesthetic.
Inputs & outputs
When to use portfolio-design-system
- →Design portfolio sections
- →Apply consistent motion rules
- →Refine dark mode UI components
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.
When not to use it
- →When designing a generic developer template.
- →When using purple-heavy gradients or decorative blobs/orbs.
- →When using animation that delays reading or scroll-jacking.
Limitations
- →Dark theme is default.
- →Purple is a controlled identity accent, not the whole palette.
- →The skill avoids specific anti-patterns like nested cards or low contrast.
How it compares
This skill enforces a specific premium enterprise portfolio design system with detailed rules for color, layout, and motion, preventing messy designs unlike generic templates.
Compared to similar skills
portfolio-design-system side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| portfolio-design-system (this skill) | 0 | 2mo | No flags | Intermediate |
| theme-factory | 61 | 3mo | No flags | Beginner |
| brand-guidelines | 9 | 3mo | No flags | Beginner |
| canvas-design | 26 | 3mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
theme-factory
anthropics
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
brand-guidelines
anthropics
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
canvas-design
anthropics
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
game-art
davila7
Game art principles. Visual style selection, asset pipeline, animation workflow.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
windows-3-1-web-designer
erichowens
Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Use for retro-themed web apps, 90s desktop aesthetics, nostalgic landing pages, pixel-art adjacent experiences. Activate on "windows 3.1", "retro ui", "beveled borders", "win31", "program manager", "90s aesthetic", "pixel art", "hotdog stand". NOT for vaporwave aesthetics (neon gradients, glowing text), glassmorphism, macOS/iOS styling, flat design, material design.