Skip to content

AGENTS.md

Latest commit

 

History

History
86 lines (63 loc) · 4.61 KB

AGENTS.md

File metadata and controls

86 lines (63 loc) · 4.61 KB
Raw
name sin-frontend-design
description OpenSIN-Code Skill — SOTA frontend design system + philosophy (Anthropic-compatible). Use when the user asks for design tokens, component specs (button, input, card, modal), page scaffolding, UI review, design-token extraction, WCAG a11y checks, responsive breakpoints, or Figma export. Falls back to templates if v0-pool is offline.

When the user asks to design, build, or review frontend UI:

  1. Load the design system first with design_system_load (or scripts/design-load.sh). Internalize the 10-point philosophy.

  2. Generate components with design_component_create (or scripts/design-component.sh). Pass use_v0=true for complex specs.

  3. Scaffold pages with design_page_scaffold (or scripts/design-page.sh). Use layout=landing for product pages, pricing for plan pages, docs for documentation, blog for posts.

  4. Review existing UI with design_review (or scripts/design-review.sh). Address error findings first, then warning, then info.

  5. Check accessibility with design_a11y_check (or scripts/design-a11y.sh). WCAG 2.2 AA is the floor — never ship below it.

  6. Extract tokens from existing code with design_token_extract (or scripts/design-tokens.sh). Re-export to Figma with design_figma_export.

  7. Test responsiveness with design_responsive_test (or scripts/design-responsive.sh). The default 6-tier system is xs/sm/md/lg/xl/2xl.

  8. Always prefer templates over v0 if the user did not ask for AI-generated code — templates are deterministic, fast, and offline-safe.

Design tokens (memorize)

  • Typography: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72
  • Spacing (4px grid): 4, 8, 12, 16, 24, 32, 48, 64, 96
  • Radius: 8 (default), 16 (card)
  • Motion: 200ms ease-out (hover), 300ms ease-in-out (transition), 500ms cubic-bezier(0.16, 1, 0.3, 1) (page)
  • Colors: neutral, primary, secondary, success, warning, error (50–900 ramp each)

GitNexus — Code Intelligence

This project is indexed by GitNexus as SIN-Code-Frontend-Design-Skill (1031 symbols, 2023 relationships, 36 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.

If any GitNexus tool warns the index is stale, run npx gitnexus analyze in terminal first.

Always Do

  • MUST run impact analysis before editing any symbol. Before modifying a function, class, or method, run gitnexus_impact({target: "symbolName", direction: "upstream"}) and report the blast radius (direct callers, affected processes, risk level) to the user.
  • MUST run gitnexus_detect_changes() before committing to verify your changes only affect expected symbols and execution flows.
  • MUST warn the user if impact analysis returns HIGH or CRITICAL risk before proceeding with edits.
  • When exploring unfamiliar code, use gitnexus_query({query: "concept"}) to find execution flows instead of grepping. It returns process-grouped results ranked by relevance.
  • When you need full context on a specific symbol — callers, callees, which execution flows it participates in — use gitnexus_context({name: "symbolName"}).

Never Do

  • NEVER edit a function, class, or method without first running gitnexus_impact on it.
  • NEVER ignore HIGH or CRITICAL risk warnings from impact analysis.
  • NEVER rename symbols with find-and-replace — use gitnexus_rename which understands the call graph.
  • NEVER commit changes without running gitnexus_detect_changes() to check affected scope.

Resources

Resource Use for
gitnexus://repo/SIN-Code-Frontend-Design-Skill/context Codebase overview, check index freshness
gitnexus://repo/SIN-Code-Frontend-Design-Skill/clusters All functional areas
gitnexus://repo/SIN-Code-Frontend-Design-Skill/processes All execution flows
gitnexus://repo/SIN-Code-Frontend-Design-Skill/process/{name} Step-by-step execution trace

CLI

Task Read this skill file
Understand architecture / "How does X work?" .claude/skills/gitnexus/gitnexus-exploring/SKILL.md
Blast radius / "What breaks if I change X?" .claude/skills/gitnexus/gitnexus-impact-analysis/SKILL.md
Trace bugs / "Why is X failing?" .claude/skills/gitnexus/gitnexus-debugging/SKILL.md
Rename / extract / split / refactor .claude/skills/gitnexus/gitnexus-refactoring/SKILL.md
Tools, resources, schema reference .claude/skills/gitnexus/gitnexus-guide/SKILL.md
Index, status, clean, wiki CLI commands .claude/skills/gitnexus/gitnexus-cli/SKILL.md