Design grammar
A growing collection of Agent Skills for Claude and other AI coding agents — starting with Design Grammar, a modular UI/UX & product design reference.
npx -y skills add tabrezdal/skills-by-tabrezdal --skill design-grammarAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Master UI/UX design intelligence: interface design, design systems, brand identity, creative assets. Covers accessibility & interaction, layout & navigation, animation & forms, color/typography, three-layer design tokens, component specs & states, Tailwind/shadcn theming, logo & brand identity (CIP), icon design, banner & social sizes/styles, slide-deck design (copywriting, layouts, strategies), and a high-concept 'Canvas' philosophy for posters/manifestos. Use whenever a task touches how something looks, feels, or is interacted with: building/reviewing UI, choosing colors/fonts/tokens, designing components or a design system, designing a logo/brand identity, banners/social graphics, pitch decks, icons, or standalone visual artifacts. Trigger even without 'UI/UX' in the request — e.g. 'make this look professional', 'build a pitch deck', 'design a logo', 'create an Instagram banner', 'set up dark mode', 'review accessibility'.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
8.2 KB, as published. Nobody here has run it
Design Grammar — Design Intelligence
Comprehensive design intelligence spanning interface design, design systems, brand identity, and creative assets — merged from interface/UX rules, design-token architecture, component specs, brand/logo/CIP guidance, banner & social media design, presentation design, icon design, and a distinct high-concept "Canvas" art-direction philosophy.
When to Apply
Use this skill whenever a task will change how something looks, feels, moves, or is interacted with — not just "UI" in the narrow sense.
Must use for:
- Designing or reviewing pages, apps, dashboards, or components
- Choosing colors, typography, spacing, or layout systems
- Building or extending a design-token system or component library
- Implementing dark mode, responsive layouts, or accessibility fixes
- Designing a logo, brand identity, or corporate identity package
- Creating banners, social media graphics, or ad creative
- Building a slide deck / pitch deck
- Designing icons or icon sets
- Producing a standalone high-concept visual piece (poster, manifesto, exhibition material)
Skip for: pure backend logic, API/database design, infrastructure/DevOps, non-visual scripts.
How to Use This Skill
- Identify the domain(s) in play from the table below — a single request often touches more than one (e.g. "build a landing page" = layout + color/typography + component specs + tokens).
- Load the relevant reference file(s) — don't guess from memory; the reference files contain concrete numbers, tables, and code patterns that matter.
- Apply the priority order below when domains conflict or time is limited: Accessibility → Touch/Interaction → Performance → everything else.
- Run the relevant pre-delivery checklist before calling work done (each domain reference ends with one).
Reference Map
| Reference file | Covers | Load when... |
|---|---|---|
references/accessibility-touch-performance.md | A11y, touch targets, performance — CRITICAL/HIGH priority rules | Always relevant for any interactive UI |
references/visual-style-color-typography.md | Style selection, color systems/psychology, contrast math, type scales, font pairings | Choosing palettes, fonts, or overall visual direction |
references/layout-responsive-navigation.md | Breakpoints, responsive patterns, nav structure rules | Building page layout or navigation |
references/animation-forms-charts.md | Motion timing/easing, form UX, data-viz rules | Adding interactions, forms, or charts |
references/mobile-app-specific.md | iOS/Android/React Native/Flutter-specific icon, interaction, dark-mode, layout rules + pre-delivery checklist | Native or React Native/Flutter app work |
references/design-tokens.md | Three-layer token architecture (primitive→semantic→component), full primitive scales | Setting up or extending a design system |
references/component-specs-states.md | Button/Input/Card/Badge/Alert/Dialog/Table specs; state priority, transitions, focus rings | Building or speccing components |
references/implementation-theming.md | Dark-mode setup, HSL/opacity token convention, Radix/shadcn a11y internals, Tailwind v4 @theme syntax | Implementing tokens/theming in code |
references/logo-brand-identity.md | Logo types, style/color selection matrices, brand collateral (CIP) specs | Logo design, brand identity, print collateral |
references/icon-design.md | 15 icon styles, categories, SVG best practices | Icon design or icon sets |
references/banners-social-media.md | Banner/cover/post size tables, 22 art-direction styles, safe zones, CTA rules | Banners, ads, social graphics |
references/presentations-slides.md | Copywriting formulas, layout patterns, deck strategies, slide HTML structural patterns | Slide decks, pitch decks |
references/canvas-design-philosophy.md | High-concept art-direction framework for posters/manifestos/exhibition pieces | Standalone visual art pieces, not functional UI |
Priority Order (when rules conflict or time is limited)
| Priority | Category | Impact |
|---|---|---|
| 1 | Accessibility | CRITICAL |
| 2 | Touch & Interaction | CRITICAL |
| 3 | Performance | HIGH |
| 4 | Style Selection | HIGH |
| 5 | Layout & Responsive | HIGH |
| 6 | Navigation | HIGH |
| 7 | Typography & Color | MEDIUM |
| 8 | Animation | MEDIUM |
| 9 | Forms & Feedback | MEDIUM |
| 10 | Charts & Data | LOW |
Fast Answers (most-consulted facts, inlined so you don't always need to open a reference)
- Contrast: 4.5:1 normal text / 3:1 large text (AA) — see
visual-style-color-typography.mdfor AAA and the calc formula - Touch targets: ≥44×44pt (Apple) / ≥48×48dp (Material), 8px+ spacing between them
- Body text: 16px minimum on mobile (prevents iOS auto-zoom)
- Spacing: 4px/8dp base unit system throughout
- Animation timing: 150-300ms micro-interactions, ease-out entering / ease-in exiting, never animate
width/height(usetransform/opacity) - One primary CTA per screen, visually dominant; secondary actions subordinate
- Color is never the sole indicator of state or meaning — always pair with icon/text/pattern
- Token architecture: Primitive (raw values) → Semantic (purpose aliases, e.g.
--color-primary) → Component (--button-bg) — never hardcode raw hex in a component - Dark mode: override the semantic layer only; test contrast independently, don't assume light-mode values carry over
Common Sticking Points → Where to Look
| Problem | Reference |
|---|---|
| Can't decide on style/color | visual-style-color-typography.md |
| Dark mode contrast issues | implementation-theming.md + visual-style-color-typography.md |
| Animations feel unnatural | animation-forms-charts.md |
| Form UX is poor | animation-forms-charts.md |
| Navigation feels confusing | layout-responsive-navigation.md |
| Layout breaks on small screens | layout-responsive-navigation.md |
| Need a logo or brand system | logo-brand-identity.md |
| Need banner/social sizes | banners-social-media.md |
| Need a pitch deck | presentations-slides.md |
| Want a poster / art piece, not an app screen | canvas-design-philosophy.md |
Notes on Scope
This skill is design intelligence — principles, specs, numbers, and code patterns — not a code-generation pipeline. It intentionally does not include: AI image-generation prompt engineering, asset-management/DAM tooling, brand-ops workflows (approval sign-off, messaging/voice strategy), or framework syntax Claude already knows cold (full Tailwind utility-class listings, full shadcn component catalogs). Where implementation code is included, it's because the pattern itself is non-obvious (e.g. the token architecture, the HSL-opacity convention, the @theme directive) — not as a syntax reference.
Credits
Built and maintained by Tabrez Dal (@tabrezdal) — v1.0.0, part of the skills-by-tabrezdal collection.
⭐ If this skill is useful to you, consider starring the repo — more skills are on the way.