skills.rest
tyroneross
tyronerossCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-guidance

Resolve design system tokens and structural constraints for UI components.

1|Updated Dec 30, 2025
Search Tags:#design#ui#frontend#validation#components#calm-precision
One-click install
npx skills add https://github.com/tyroneross/interface-built-right --skill design-guidance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guidance
Source: https://github.com/tyroneross/interface-built-right/tree/main/skills/design-guidance
Command: npx skills add https://github.com/tyroneross/interface-built-right --skill design-guidance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of inconsistent UI implementation and design debt by enforcing structural constraints and design system tokens before code is written.

Core Features & Use Cases

  • Design Constraint Enforcement: Applies Calm Precision 6.4.1 rules to ensure structural integrity, accessibility, and platform-specific conventions.
  • Component Pattern Selection: Maps user intent to standardized patterns like cards, navigation, and dashboards to maintain visual consistency.
  • Validation Handoff: Prepares the environment for automated visual and interaction scanning to verify design intent against the rendered output.

Quick Start

Activate the design guidance skill to receive structural constraints and component pattern recommendations for the new dashboard page you are building.

Frequently Asked Questions about design-guidance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent UI design system tokens before writing frontend code?▼

Mapping user intent to standardized component patterns like cards, navigation, and dashboards maintains UI visual consistency. This approach applies structural constraints and design tokens to guide implementation and prevent fragmented interface design.

Can I validate rendered UI output against the original design intent?▼

Calm Precision principles provide deterministic structural constraints for UI development. They ensure accessibility, structural integrity, and platform-specific conventions are resolved automatically when mapping component patterns like cards and dashboards.

What is the best way to prevent design debt when building new dashboard pages?▼

Resolving design system tokens before code is written prevents inconsistent UI implementation. This process maps user intent to standardized component patterns and applies structural constraints to guarantee visual consistency and functional integrity.

Why does my frontend UI lack visual consistency across different components?▼

Deterministic UI design resolves design system tokens and platform-specific routers to provide structural constraints. It uses Calm Precision principles to map user intent to standardized component patterns, ensuring functional integrity before code is written.

Related Skills

Explore More Design & Creative Skills→
giosuetedeschi-specgiosuetedeschi-spec

core-components

Enforce semantic design tokens and centralized components in Next.js UI development.

Community
Intermediate
tyronerosstyroneross
1

design-system

Validate rendered web output against project-specific design tokens and UI principles.

Community
Advanced
systempromptiosystempromptio
2

component-patterns

Provide reusable CSS and HTML component patterns for consistent UI layouts.

Official
Advanced
tyronerosstyroneross
1

ui-ux-guidance

Plan and validate UI/UX implementation across web and mobile platforms.

Community
Advanced