elegant-design

The Elegant Design skill provides a structured, philosophy-driven framework for creating high-performance, accessible, and polished web interfaces. It is designed for software engineers and UI developers working within the React and Next.js ecosystem. The skill emphasizes an intentional design process that balances technical performance with user experience, ensuring that every interface element serves a specific purpose, from layout patterns to sophisticated interactive components.

• Expert guidance on utilizing modern design systems including shadcn/ui, daisyUI, and HeroUI for rapid, consistent component development.

• Specialized implementation patterns for complex UI requirements like terminal emulators, code syntax highlighting, real-time streaming content, and markdown-rendered chat interfaces.

• Robust workflows for accessibility compliance (WCAG) and responsive design, ensuring interfaces work seamlessly across devices and screen readers.

• Integrated OODA-loop planning templates (Observe, Orient, Decide, Act) to map complex user journeys and state transitions before code implementation.

• Best practices for performance optimization including lazy loading, code splitting, and meeting Core Web Vitals targets.

• Visual foundations covering typography (Geist, JetBrains Mono), semantic color tokens, and 8px spacing systems for visual consistency.

• Users should initiate this skill when prototyping new technical interfaces or upgrading existing developer tools to ensure professional polish.

• Expected inputs include project requirements, component specifications, or accessibility objectives; expected outputs include structured React/Next.js code, component architecture plans, and flow diagrams (Graphviz/DOT).

• Constraints include a strong preference for atomic design principles (atoms to pages) and a mobile-first responsive methodology.

• Integrates tightly with existing development workflows by providing direct reference to foundational guides for typography, layout, and specialized interactive modules like diff viewers and log consoles.