Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Aboudjem/ui-ux-suite --skill design-checklistgit clone --depth 1 https://github.com/Aboudjem/ui-ux-suiteWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/aboudjem/ui-ux-suite/design-checklist)<a href="https://agentmods.dev/skills/aboudjem/ui-ux-suite/design-checklist"><img src="https://agentmods.dev/badge/skills/aboudjem/ui-ux-suite/design-checklist/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/aboudjem/ui-ux-suite/design-checklist"><img src="https://agentmods.dev/badge/skills/aboudjem/ui-ux-suite/design-checklist.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00032 | $0.00557 |
| Opus 5 | $0.00016 | $0.00279 |
| Sonnet 5 | $0.00006 | $0.00111 |
| Haiku 4.5 | $0.00003 | $0.00056 |
Grade A, and why
design-checklist scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 69 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/design-checklist: Pre-Launch Design Checklist
Interactive checklist covering all design quality aspects before launch.
Checklist Categories
Visual Consistency
- Color system defined with CSS variables or tokens
- Typography scale with clear hierarchy
- Consistent spacing scale (4px or 8px base)
- Consistent border-radius
- Consistent shadow system
- Icon style consistent (all outline or all filled)
- Consistent capitalization (sentence case for UI)
State Coverage
- Button states: hover, active, focus, disabled, loading
- Input states: focus, error, disabled, filled
- Empty states for all data views
- Loading states (skeletons or spinners)
- Error states with recovery actions
- Skeleton screens for initial load
Responsive
- Works on mobile (375px)
- Works on tablet (768px)
- Works on desktop (1440px)
- No horizontal scroll on any breakpoint
- Touch targets 44x44 on mobile
- Text readable without zoom on mobile
Accessibility
- Contrast ratios pass WCAG AA (4.5:1 text, 3:1 large/non-text)
- Focus indicators visible on all interactive elements
- Keyboard navigable (all actions reachable via Tab)
- Skip-to-content link
- Alt text on images
- Form labels associated with inputs
- prefers-reduced-motion supported
- Heading hierarchy correct (h1 > h2 > h3)
Dark Mode (if applicable)
- Proper surface hierarchy (not just inverted)
- Reduced saturation on vivid colors
- Text contrast maintained
- Images/illustrations adapt to dark
Performance
- Images lazy loaded
- Fonts preloaded with font-display: swap
- Above-fold content loads first
- No layout shift during load
Polish
- Favicon works at all sizes
- og:image / social sharing meta
- Custom error pages (404, 500)
- Smooth transitions on interactive elements
- Custom selection color
- Branded focus ring
- Print styles (if content is printable)
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago Changed · -1 lines · +22 tokens per session afbf5fd357b2
- 10d ago First seen · 70 lines · 10 tokens per session scan A 29ff0e5882cd
design-checklist is a skill published in the GitHub repository Aboudjem/ui-ux-suite (7 stars, last pushed 4d ago), licensed MIT. It adds 32 tokens to every session and 557 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
design-with-claude
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and…
create-db-component
Creates a new DB UX Design System component with Mitosis source, SCSS, typed model, and Playwright tests.
modify-db-component
Modifies an existing DB UX Design System Mitosis component (add variants, update props, change styles).
implement-component
Implements production-ready UI using DB UX Design System v3 components, tokens, and icons with a discovery-first approach.