Guide UI design decisions and CSS architecture for frontend development.
npx skills add https://github.com/heyJordanParker/dotfiles --skill design-heyjordanparker
Please help me install this Agent Skill. Skill: design Source: https://github.com/heyJordanParker/dotfiles/tree/main/claude/.claude/skills/design Command: npx skills add https://github.com/heyJordanParker/dotfiles --skill design-heyjordanparker
This Skill provides a consistent framework for UI design decisions, CSS architecture, and responsive patterns to reduce visual drift and improve usability across projects.
Review the Frontend Design guide and apply its principles to a new UI component. Document your decisions following the CSS Architecture references. Start by outlining the component's purpose, layout, tokens, and responsive behavior.
High-intent search queries and answers about installing and using this skill.
Maintain consistent UI design by applying a framework of design modes, core principles, and CSS architecture patterns. This reduces visual drift by standardizing tone, typography, and spacing decisions across your project's components.
Structure CSS architecture using design tokens by documenting component purpose, layout, and responsive behavior. This approach standardizes visual system documentation and provides clear guidelines for styling pages and evaluating patterns.
Evaluate responsive design patterns by reviewing frontend design guidelines and applying them to the component. Start by outlining the component's purpose, tokens, and responsive behavior to ensure proper layout adaptation.
Common UI design anti-patterns involve inconsistent visual choices that cause visual drift. Avoid these by selecting defined design modes like minimal or bold, which guide tone, typography, and layout decisions systematically.
No dependencies are required to apply these UI design guidelines. The framework operates independently, using standard YAML frontmatter and Markdown to document design thinking, core principles, and quick start steps for frontend tasks.
Yes, you can use this framework for both minimal and bold design modes. These predefined modes guide specific tone, typography, spacing, and layout decisions to ensure your frontend UI matches the desired visual style.
telihaGenerate specification files from requirements into specs/[feature-name]/spec.md.
rodrigo-altissimoGenerate frontend architecture plans for design systems using the Four Pillars framework.
monch1962Provides reusable React and Next.js frontend patterns for UI architecture.
jmserveraDocument and enforce project-specific coding conventions for AI agents.
