All categories
Design & UX
UI, UX, design systems, accessibility, visual design, and frontend polish
- 9,095
- 379
Security grades appear on each card once the skill has been scanned. Newly imported skills may briefly show without a grade until the backfill job runs.
Open in full browserBrowse design & ux skills
Showing 49–72 of 9,095 skills
- Oatmeal Template AuditAudit and refine an HTML page in `1-html/by-template-family/ml-templates/oatmeal/` against the canonical Oatmeal template fingerprint — tokens, primitives, components, layout vocabulary, decorative motifs. Use whenever a new page is built in the oatmeal directory, when a page is being refined for template fidelity, or when the user says "make this look like the oatmeal template," "audit this against oatmeal," "is this on-brand for oatmeal," or "apply oatmeal styling." Complements `movemental-...Votes: 0GitHub stars: 2
- Movemental Page AuditorAudit any Movemental page (HTML mockup or production React) across six passes — narrative sequencing, copy & language, typography/hierarchy, UI/proof/demonstration, proof burden, and cross-site role — and return a structured, ranked critique. Use this skill whenever the user asks to audit, review, critique, diagnose, or "be tough on" a Movemental page (`/`, `/fragmentation`, audience pages, articles, `/book`, `/system`, `/walkthrough`, FAQ, `/assess`, `/assessment-new`, audience concept pages...Votes: 0GitHub stars: 2
- Movement Leader Platform BuildAudits a movement-leader tenant against the master component checklist, writes a gap-remediation build prompt to docs/build/prompts/, then implements missing pages and components in the repo's existing design system with full type-safety compliance. Use when running the platform checklist, auditing component gaps, building remaining pages, platform build, master-component-checklist, or remediating missing shell/themes/ library/formation routes. Run from any movement-leader repo root.Votes: 0GitHub stars: 2
- Ml Template From ReferenceBuild an HTML/CSS/JS movement-leader template (home + content library + articles) whose visual design matches a provided reference image (or images) exactly. The movemental (alan-hirsch) navigation structure is fixed and consistent across leaders; everything else — color, type, layout, density, motifs — is extracted from the reference. The reference image(s) and an extracted style-spec are archived inside the template directory so future passes can re-consult them.Votes: 0GitHub stars: 2
- Feature ConstitutionExport a platform feature as a product constitution — data model, API contracts, business rules, and acceptance criteria for pasting into AI Studio Build mode or any prototyping tool. Use when generating a feature spec, exporting a course/article/agent feature, or creating a data reference document.Votes: 0GitHub stars: 2
- Docs Design SystemAudit and update design documentation in _docs/_build/design/ to match the actual UI stack (tokens, Tailwind, shadcn primitives, domain components, pages). Keeps DESIGN_SYSTEM_SSOT.md and the design chain aligned with src/.Votes: 0GitHub stars: 2
- Zenwrite Ui AuditAudit and improve existing ZenWrite UI — React 19 + Tailwind v4 quality plus the ZenWrite design chain (light-primary, dual-sphere; Newsreader serif + Manrope; brand-violet content, sky/emerald/rose community). Finds and fixes design drift (hardcoded hex, dynamic color strings, wrong sphere accents, missing focus rings, ad-hoc badges, dark-mode hijacks, token misuse) AND React/Tailwind/a11y/perf issues, ranked by severity, then applies the fixes. Use whenever REVIEWING, ALIGNING, CLEANING UP,...Votes: 0GitHub stars: 2
- Zenwrite DesignDesign and build new UI for ZenWrite — the light-primary, distraction-free scholarly-writing app — the best possible way within its own design chain (Tokens → Primitives → Components → Built → Patterns). Newsreader serif + Manrope, brand-violet content sphere, sky/emerald/rose community sphere, React 19 + Tailwind v4 (CSS-first). Use whenever CREATING or EXTENDING a ZenWrite component, panel, screen, tile, overlay, wizard, or page — including "build a component," "add a panel," "make a new sc...Votes: 0GitHub stars: 2
- Zenwrite Design ChainBuild new UI or audit/align existing UI for the ZenWrite scholarly-writing app — its light-primary, dual-sphere design system (Newsreader serif + Manrope, brand-violet content sphere, sky/emerald/rose community sphere) plus React 19 + Tailwind v4 and general web/a11y/responsive best practice. Use whenever creating, editing, reviewing, or "bringing into alignment" any ZenWrite component, panel, screen, or page — even when the user only says "build a component," "make this match our style," "au...Votes: 0GitHub stars: 2
- Visual Storytelling AuditCross-platform audit of visual storytelling components — cards, grids, stats, comparisons, numbered steps, section rhythm, and narrative flow. Ensures every visual element tells the story with the best design possible. Use when auditing pages for narrative clarity, visual hierarchy, and design token compliance.Votes: 0GitHub stars: 2
- Typography PolishAudit and fix typography across movemental — heading hierarchy, Inter font compliance, display tracking, eyebrow conventions, prose width, and content readability across all page surfaces.Votes: 0GitHub stars: 2
- TypesetImprove typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.Votes: 0GitHub stars: 2
- Scholarly Editorial UiFront-end UI design expert for the alan-hirsch app's "Scholarly Editorial / Plum & Parchment" design system. Use when building or restyling any page, section, hero, card, nav, or component in this repo — to match the existing visual language. Anchors to src/app/globals.css tokens, tailwind.config.ts, and _docs/_build/design/SCHOLARLY_EDITORIAL.md. Keywords: plum, parchment, Newsreader, Manrope, scholarly, editorial, tonal surfaces, no-line rule, shadcn, Radix, motion/react, design tokens, the...Votes: 0GitHub stars: 2
- Scholarly Authority UiFront-end UI design expert for movemental-visual-editor-main's "Warm Scholarly Authority" dashboard design system. Use when building or restyling any dashboard page, content/course card, editor surface, list/detail view, shell chrome, or component to match the existing visual language. Anchors to src/app/globals.css (@theme tokens), the src/components/ui/* primitives, and golden pages like src/app/(dashboard)/content/page.tsx. Keywords: warm scholarly authority, cream paper, deep navy, amethy...Votes: 0GitHub stars: 2
- Page AuditHolistic audit of any movemental.com page — UI, content, architecture, UX, and conversion — writes a markdown report and a standalone fix prompt.Votes: 0GitHub stars: 2
- Oatmeal Editorial UiFront-end UI design expert for the movemental-html-template "Oatmeal" static marketing template. Use when building or restyling any HTML page, hero, section, card, nav, CTA band, or footer to match the existing visual language. Anchors to css/tokens.css (the token SSOT), css/components.css (ml-* primitives), the design-chain/design-chain.html charter, and _reference/style-spec.json. Keywords: oatmeal, cream paper, Playfair Display, Inter, pill CTA, surface tiers, hairlines, terminal period, m...Votes: 0GitHub stars: 2
- Movemental InkFront-end UI design expert for movemental-ai's "Ink Band" design system — the agent room. Use when building or restyling any screen, primitive, shell zone, or component on the .ink-band-surface to match the existing visual language. Anchors to the .ink-band-surface tokens in src/app/globals.css, the agent-room CSS module (src/components/agent-room/ink-band.module.css), the real component tree (shell/ · screen/ · ink/), and docs/design/INK_BAND_DESIGN_CHAIN.md. Keywords: Ink Band, agent room, ...Votes: 0GitHub stars: 2
- Icon SystemEstablish or validate the canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards. Creates src/components/ui/icon.tsx and documents the full icon system. Run once to bootstrap, then as a validator.Votes: 0GitHub stars: 2
- Icon AuditAudit and fix icon usage for movemental — mixed libraries, wrong sizes, hardcoded colors, missing accessibility, and illustration anti-patterns. Enforces lucide-react as the single icon library.Votes: 0GitHub stars: 2
- Html To React TailwindConvert HTML/CSS/JS files into production-ready React components with Tailwind CSS. Handles CSS-to-utility mapping, JS-to-React state/effects, component decomposition, and TypeScript types. Triggers on "HTML to React", "convert HTML", "migrate to React", "React conversion".Votes: 0GitHub stars: 2
- Figma PromptGenerate a complete Figma Make prompt package — Context Primer, Checkpoint, Section Build Prompts, and Iteration Templates — for any UI page, component, or screen. Uses intent-first prompting and Figma-native vocabulary. Counterpart to the studio-prompt skill, tuned for design artifacts rather than working code.Votes: 0GitHub stars: 2
- Designer DashboardApply the Stitch → tokens → primitives → components → layouts design chain to React/Tailwind dashboard UI for cohesive, on-brand surfaces. Use when building or refactoring dashboard routes, course/lesson editors, metadata pages, shell chrome, or running an agentic UI pass that must stay token-aligned.Votes: 0GitHub stars: 2
- Design SectionDesign a new UI section or component for movemental using DESIGN.md conventions — tonal stacking, primitives, semantic tokens, and the Stitch-informed editorial style.Votes: 0GitHub stars: 2
- Design ChainAudit and enforce the five-layer design chain (tokens → Tailwind → primitives → sections → pages) across all components and pages. Finds hardcoded values, layer violations, broken mode parity, and missing primitives.Votes: 0GitHub stars: 2