proofline
TR

ui-design

Purpose

Designs UI by visitor mode for each surface.

Source Skill purpose

When to use it

Use ui-design when a task changes screens, flows or visible behavior. It reads the existing design system, or derives one from real UI when absent, before proposing a task-level specification. The specification describes each screen's states, copy, keyboard and screen-reader behavior, responsive layout and visual proof criteria. Existing tokens and components are reused with verified paths; new ones need a reason. The designer critiques the specification but does not give its own final quality approval.

The specification covers empty, loading, error, success, partial and permission-denied states or explains why a state cannot occur. It marks which criteria require visual proof and records actual copy rather than placeholders. New components need a reason existing ones cannot fit.

Source Skill purpose

How it works

Steps of the skill, in source orderEach numbered step follows the skill definition and links to its source.1. Identify UI scopeFlow2. Read the design systemFlow3. Inventory reusable partsFlow4. Specify screens and flowsFlow5. Describe accessibilityFlow6. Justify new elementsFlow7. Write the specificationFlow8. Validate the specificationFlow9. Report coverageFlow
Steps of the skill, in source order

Source Flow

  1. Identify UI scope Read the assignment and list affected screens, flows and acceptance criteria.

    Source Flow

  2. Read the design system Use the current design document or derive its tokens and components from existing UI.

    Source Flow

  3. Inventory reusable parts Find relevant components and tokens, each with a verified repository path.

    Source Flow

  4. Specify screens and flows Choose the visitor mode, creative direction and UX patterns, then specify every screen state and describe flows as ordered screen steps.

    Source Flow

  5. Describe accessibility State keyboard, focus, screen-reader and responsive behavior for each screen.

    Source Flow

  6. Justify new elements Add a new element only when existing parts do not fit, then critique the design.

    Source Flow

  7. Write the specification Write machine-readable UI data and the task's readable UI document.

    Source Flow

  8. Validate the specification Run the UI validator against the task, class and design document.

    Source Flow

  9. Report coverage Summarize reused and new elements, state coverage and unresolved questions.

    Source Flow

Key rules

  • Choose a visitor mode for each surface, with a reason for that choice and a direction suited to the mode.

    Source Hard rules

  • Reuse verified tokens and components before creating new ones.

    Source Hard rules

  • Specify every required state for every screen or explain why it does not apply.

    Source Hard rules

  • Include keyboard, focus and screen-reader behavior in the specification.

    Source Hard rules

  • Use each file’s surface design document and shared base; report a contradiction with the shared base as a finding.

    Source Hard rules

Output and gate

Output

The skill definition states no output.

Source Skill definition

Gate

  • Validation must succeed; missing states or unverified reuse paths prevent completion.

    Source Gate rule

Source

Source Skill definition

← All skills