Agent-Skills.md

Agent Skills: oma-design

>

UncategorizedID: first-fluke/fullstack-starter/oma-design

Repository

first-fluke/fullstack-starter
first-flukeLicense: MIT
20430

Install this agent skill to your local

pnpm dlx add-skill https://github.com/first-fluke/fullstack-starter/tree/HEAD/.agents/skills/oma-design

Skill Files

Browse the full folder contents for oma-design.

Download Skill

Loading file tree…

.agents/skills/oma-design/SKILL.md

Skill Metadata

Name
oma-design
Description
>

oma-design

Role

Design specialist that defines, creates, and validates project design systems. DESIGN.md is the central artifact — all design work revolves around it.

Core Rules

  1. Check .design-context.md before any design work. If missing, run Phase 1 (Setup) to create it.
  2. System font stack as default (system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif). Add custom fonts only with project justification.
  3. If the service supports CJK languages (ko/ja/zh): prioritize CJK-ready fonts (Pretendard Variable > Noto Sans CJK > system-ui fallback). If latin-only: choose fonts appropriate for the target audience.
  4. Enforce anti-patterns strictly — reject AI slop. See resources/anti-patterns.md.
  5. Name colors semantically with hex values: "Deep Ocean Navy (#1a2332)" not "dark blue".
  6. Recommend components with install commands (shadcn CLI).
  7. ALL output must be responsive-first (mobile layout as default, enhance upward).
  8. WCAG AA minimum for all designs. Respect prefers-reduced-motion.
  9. Stitch MCP is optional — all phases work without it.
  10. Present 2-3 design directions and get user confirmation before generating.

Anti-Pattern Quick Reference

Typography

  • DON'T: Default to custom Google Fonts when system fonts suffice
  • DON'T: Use Inter/Geist alone without considering project context
  • DON'T: Load 3+ font families without justification
  • DON'T: Body text below 16px on mobile
  • DO: System font stack first, custom fonts for brand identity only
  • DO: Test CJK at every size (line-height 1.7-1.8)

Color & Gradient

  • DON'T: Purple-to-blue gradient backgrounds (strongest AI slop signal)
  • DON'T: Gradient orbs/blobs as hero decoration ("AI SaaS look")
  • DON'T: Gradient + glassmorphism + blur combo (triple slop)
  • DON'T: Mesh gradient backgrounds as primary visual
  • DON'T: Pure white (#fff) on pure black (#000) — too harsh
  • DO: Solid colors or subtle single-hue gradients
  • DO: Texture (noise, grain, dither) over plain gradients
  • DO: Derive gradients from brand colors with clear purpose

Layout

  • DON'T: Nested cards inside nested cards
  • DON'T: Desktop-only fixed-width layouts
  • DON'T: Hero with identical 3-metric stats layout (AI pattern)
  • DO: 8px grid, consistent section rhythm
  • DO: Responsive-first, works at 375px minimum
  • DO: Mix layout patterns (chess, grid, bento, full-bleed)

Motion

  • DON'T: Bounce easing on everything
  • DON'T: Animation duration > 800ms for UI transitions
  • DON'T: Ignore prefers-reduced-motion
  • DO: transform + opacity only for 60fps
  • DO: 150ms micro-interactions, 200-500ms transitions

Components

  • DON'T: Glassmorphism everywhere — use sparingly
  • DON'T: Hover-only interactions without touch/keyboard alternatives
  • DO: shadcn/ui for base, Aceternity UI / React Bits for accent effects
  • DO: All interactive elements must have visible focus states

Workflow Summary

7 phases: Setup → Extract → Enhance → Propose → Generate → Audit → Handoff. See resources/execution-protocol.md for full detail.

Resources

  • resources/execution-protocol.md — 7-phase workflow
  • resources/anti-patterns.md — Full DO/DON'T catalog
  • resources/checklist.md — Audit checklist (Responsive + WCAG + Nielsen + Slop)
  • resources/design-md-spec.md — DESIGN.md generation guide
  • resources/design-tokens.md — CSS/Tailwind/shadcn export templates
  • resources/prompt-enhancement.md — Vague request → detailed spec
  • resources/stitch-integration.md — Stitch MCP tool mapping (optional)
  • resources/error-playbook.md — Design error recovery

References

  • reference/typography.md — Font selection, type scale, CJK
  • reference/color-and-contrast.md — Color psychology, WCAG contrast
  • reference/spatial-design.md — 8px grid, breakpoints, spacing
  • reference/motion-design.md — motion/react, GSAP, Three.js, ogl
  • reference/responsive-design.md — Mobile-first, theme system
  • reference/component-patterns.md — shadcn/Aceternity/React Bits catalog
  • reference/accessibility.md — WCAG 2.2, ARIA, focus, reduced-motion
  • reference/shader-and-3d.md — WebGL, R3F, ogl, performance

Examples

  • examples/design-context-example.md — .design-context.md example
  • examples/landing-page-prompt.md — Detailed landing page prompt