interface-design

This skill provides a systematic design framework for utilitarian software such as internal tools, analytics dashboards, and data-heavy admin panels. It is designed to assist AI agents in maintaining visual and structural consistency across frontend development sessions. Instead of reinventing UI patterns, it enforces a 'component-library-first' philosophy, leveraging industry-standard tools like shadcn/ui, Skeleton, Flowbite, and Ant Design while documenting a thin customization layer on top. By ensuring that all UI decisions are recorded in a project-specific 'interface-design.md' document, the agent can reliably handle layout choices, typography, color palettes, and spacing rules without drift.

• Standardizes UI patterns for dashboards, admin panels, and data-heavy applications.

• automates the creation and maintenance of project design documentation to ensure visual consistency.

• Integrates seamlessly with popular component libraries like shadcn/ui, Skeleton, and Ant Design.

• Provides a structured workflow for gathering project context, user roles, and design intent.

• Establishes clear guidelines for layout patterns, data tables, filter bars, and loading states.

• Encourages hierarchy through contrast and typography rather than excessive decorative elements.

• Use this skill when initiating a new project, adding major UI components, or performing periodic design reviews.

• Always prioritize the component library's default behavior unless a specific override is documented in 'interface-design.md'.

• Follow the defined hierarchy for text and surface elevation (e.g., subtle borders over drop shadows).

• Constraints: Not intended for marketing landing pages or decorative creative sites.

• Keywords: UI design, design system, component library, dashboard, data table, admin panel, frontend consistency, shadcn/ui, Skeleton, Ant Design, UX patterns, spacing, typography, utilitarian interface.