ry-design

name: ry-design description: "Сквозной дизайн workflow: Figma, code, tokens, i18n, validation. Используй для: /ry-design, UI, лендинг, дашборд. EN: end-to-end design, build UI."

Purpose

Run the full rldyour design implementation workflow from source design to browser-validated code.

User-facing communication stays in Russian unless requested otherwise. Code, docs, tokens, comments, and commits stay in English.

Auto Invocation

Use this skill without waiting for an explicit $ry-design call when the user asks for an end-to-end design result rather than a narrow subtask:

Implement a Figma design, designer mockup, page, component, landing, dashboard, widget, feature UI, or redesign.
Create UI that requires tokens, architecture placement, shadcn/ui or ReactBits components, and browser validation.
Make frontend design work "pixel-perfect", "production-ready", "according to design", or visually and functionally complete.
Coordinate multiple design skills in one task.

For very narrow tasks, prefer the matching subskill directly. Use design-validation after any meaningful visible implementation even when $ry-design is not selected.

For production-quality Figma/UI work, read ../../references/figma-delivery-contract.md before implementation and before final delivery.

Workflow

Establish scope: target page/component, Figma source, required states, responsive frames, business behavior, content/data ownership, i18n requirements, and acceptance criteria.
Use figma-to-code if Figma context exists. Figma MCP is the design source of truth.
Build the implementation manifest from figma-delivery-contract.md.
Classify each block as static/config/admin/CMS/API/session-backed before choosing hardcoded config, admin schema, API/domain model, or localized resource placement.
Use design-system-implementation to create or update centralized tokens, UI-kit primitives, and i18n-ready content surfaces before scattering raw values or text.
Use fsd-frontend-architecture to place code into strict FSD layers and public APIs.
Use shadcn/ui MCP for primitives, blocks, and registry-based components.
Use ReactBits.dev only for purposeful motion or interactive effects that match the design.
Implement code with Serena-first local code inspection when available.
Use design-validation and rldyour-browser to verify pixel-perfect layout, functionality, business logic, accessibility, desktop/mobile, provided Figma frame sizes, state matrix, screenshots, i18n, token/static scans, and runtime health.
Fix mismatches and revalidate until the result is correct or the blocker is explicit.
If durable architecture/design-system facts were created, update Serena memories through serena-memory-sync.

Rules

Centralized design system first: tokens, theme, primitives, variants, and shared assets must have a single source of truth.
Centralized i18n first for visible copy. Static content is not admin-backed, but it is still localized unless the project explicitly has no i18n.
Classify dynamic/static/admin-backed content before implementation; do not silently turn dynamic product data into JSX fixtures.
Figma context is source material, not copy-paste code. Adapt to architecture and existing project conventions.
Strict FSD by default: no deprecated processes, no cross-slice internals, public APIs required.
shadcn/ui is the primary UI primitive source.
ReactBits is for controlled motion and standout interactive details, not broad architecture.
Browser validation is mandatory for meaningful frontend design work.
The final answer is blocked until design validation passes or the exact external blocker is documented.
Browser artifacts go under browser/ and are not committed.
Do not use placeholders when real Figma assets are available.
Do not break business logic to match visuals.

Output

For a completed design task, answer in Russian with:

Scope: design/page/component implemented.
Figma: source frame/context and assets used.
Content model: dynamic/static/admin/i18n decisions.
Design system: tokens/components/assets changed.
FSD: placement decisions and public APIs.
Validation: browser screenshots/checks and cleanup status.
Residual gaps: any unresolved visual, asset, responsive, runtime, or business-logic gaps.