Spring — Design Library home
All skills

Skills

Spring Agentic Workflow

Applies the Spring Design Library outcome-first agentic workflow. Use when the user asks for design-to-code, AppFlow screens, component generation, Figma Code Connect, token changes, workflow cleanup, agentic orchestration, repo-structure decisions, or maintainable file placement.

Use this skill to run the Spring Design Library workflow from intake to handoff.

Quick Start

  1. Read docs/ai/project-context.md to classify the request.
  2. Read docs/ai/operational-manifesto.md for the workflow, roles, and guardrails.
  3. Read docs/ai/workflow-contracts.md for file placement, injection points, Code Connect placement, and validation contracts.
  4. Inspect nearby examples in packages/spring-ds-react/src/components/ or apps/design-library/src/gallery/.
  5. Before delivery, read docs/ai/review-checklist.md.

Outcome Types

Classify every task before implementation:

  • Reusable design system component
  • Gallery documentation page
  • AppFlow screen
  • Static design library page
  • Token/foundation change
  • Icon change
  • Documentation/rule change

If the outcome, source design, target user, missing states, file target, or validation expectation is unclear, ask before building.

Required Build Plan

Before implementation, state:

  • outcome type
  • reuse decision
  • files to read
  • files to change
  • registry, route, export, nav, Code Connect, or token injection points
  • validation commands
  • whether user approval is required

Critical Rules

  • Route shells stay thin and re-export gallery implementations.
  • Components live in packages/spring-ds-react/src/components/ and export from packages/spring-ds-react/src/index.ts.
  • Gallery pages and AppFlow screens live under apps/design-library/src/gallery/.
  • AppFlow screens register in apps/design-library/src/gallery/page/appflow/personalLoanFlow.ts.
  • Code Connect is package-side for new reusable components and all inputs; gallery-side only for existing navigations, overlays, and SpringSearchBar.
  • Token changes require approval, npm run tokens:sync, dev-server restart for local preview, and .next clearing before production build validation.

Handoff

Include WorkflowRunState, files changed, route/import path, injection summary, validation results, skipped validations, dirty-tree caveats, and remaining risks.