ui-guidelineslisted

Ant Design house style for one specific React/Next.js application — its design tokens, color palette, typography scale, 8px/12px/16px/24px spacing, animations, and copy-ready patterns for antd tables, forms in modals, selectable card grids, loading states, avatars, and status tags. Use when building or restyling a form, table, modal, card, list, or page layout in a codebase that already standardizes on Ant Design and the new component must match the existing design system. It is not a general UI or accessibility reference, does not apply to Tailwind, Material UI, Chakra, or plain-CSS projects, and carries no chart or data-visualization guidance — charts, graphs, dashboards, and palette choice for data viz are out of scope.
pfangueiro/claude-code-agents · ★ 6 · Web & Frontend · score 76

Install: claude install-skill pfangueiro/claude-code-agents

# UI Guidelines for Application ## Overview This skill provides UI/UX guidelines for building components in a React/Next.js application using Ant Design and consistent design tokens. It ensures all new components match the existing design system with proper colors, spacing, typography, and interaction patterns. ## When to Use This Skill Trigger this skill when: - **Creating UI components**: forms, tables, modals, cards, lists - **Adding new features** that require UI elements - **Implementing loading states** or animations - **Styling components** to match the design system - **User asks to build/create/add** any visual component ## Out of Scope — Stop and Do Something Else If the work you are about to do is any of the following, **stop using this skill** and take the redirect instead. Nothing below applies: - **Charts, graphs, plots, or data-visualization palettes** (categorical / sequential / diverging series colors, sparklines, heatmaps, stat tiles, dashboard chart layout). This skill carries **no** chart guidance, and its brand palette is not a series palette — do not extrapolate one from it. Use a dedicated data-visualization skill or reference (`dataviz`, where available) instead. - **A codebase that is not standardized on Ant Design** — Tailwind-only, Material UI, Chakra, or plain CSS. None of the patterns below transfer; follow that stack's own conventions. - **A general accessibility or UX audit.** This is one application's house style, not an a11y reference.