Stats
Actions
Tags
From ns-design-system
Apply NS design system guidelines when creating or reviewing UI components. Use when asked to "follow design system", "style this component", "create a button", "design a form", or when building new UI features. Automatically triggered for frontend component work.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ns-design-system:ns-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **Kitchensink**: `/kitchensink` - Interactive component demos
/kitchensink - Interactive component demosdocs/frontend/design-system.mdNS design is clean, professional, action-oriented:
rounded-fullp-5 cards, gap-6+ sectionsiron-900 text on light backgroundsDon't: Gold buttons. Excessive decoration. Borders everywhere.
Do: Clean interfaces. Skeuomorphic CTAs. Let content breathe.
Neutrals (Iron)
iron-25 #FCFBFCiron-50 #F9F9F9iron-200 #E4E4E7iron-400 #A0A0ABiron-600 #51525Ciron-800 #26272Biron-900 #1A1A1EPillars
#F7931A (orange)#1963FF (blue)#DC2626 (red)#8A4FFF (purple)#51525C (gray)Semantic
#F04438#099250#155EEFGold (use sparingly): #B99463, #E5C083, #8E7143
Base components in apps/web/base/. Never modify—wrap instead.
<NSButton variant="primary" display="medium" type="button" onClick={fn}>
Label
</NSButton>
Variants: primary (dark, skeuomorphic), secondary (white, border), tertiary (ghost)
Sizes: small (40px), medium (48px), large (56px)
<NSTextField display="medium" label="Email" type="email" required error={err} />
Sizes: small (32px), medium (48px), large (56px)
<NSCard pillar="earn" earnType="bounty" href="/earn/123">
<NSCard.Media src={img} aspectRatio={[4, 3]} />
<NSCard.Title as="h3">Title</NSCard.Title>
</NSCard>
<NSCheckbox display="medium" label="Accept terms" checked={val} onChange={fn} />
| Element | Token |
|---|---|
| Card padding | p-5 |
| Section gaps | gap-6 to gap-8 |
| Form gaps | gap-2 |
| Buttons | rounded-full |
| Cards | rounded-2xl |
| Primary shadow | shadow-skeuomorphic |
PillarIcon, CryptoCoinIcon, EarnTypeIcon in apps/web/base/icons/layout → positioning → sizing → spacing → background → border → typography → variants
<div className="flex items-center w-full p-4 bg-white rounded-lg hover:bg-iron-50">
focus-visible:ring-2 focus-visible:ring-iron-800 focus-visible:ring-offset-2
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub thenetworkstate/ns-plugins --plugin ns-design-system