ui-skills

Enforce Swiss Style UI constraints with Tailwind CSS and shadcn-svelte.

1|Updated Feb 1, 2026
One-click install
npx skills add https://github.com/dopiotrek/dotclaude --skill ui-skills-dopiotrek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/dopiotrek/dotclaude/tree/main/skills/frontend-design
Command: npx skills add https://github.com/dopiotrek/dotclaude --skill ui-skills-dopiotrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a set of opinionated constraints and principles to guide AI agents in building more consistent, accessible, and performant user interfaces.

Core Features & Use Cases

  • Enforces Design System: Ensures adherence to a specific design philosophy (Swiss Style, technical instrumentation) and technical stack (Tailwind CSS, shadcn-svelte).
  • Component & Interaction Guidelines: Dictates how components should be used, accessibility considerations, and interaction patterns.
  • Performance & Animation Rules: Sets clear boundaries for animations and performance optimizations.
  • Use Case: An agent is tasked with building a new dashboard. By invoking /ui-skills, the agent will automatically apply the defined grid system, typography rules, and use of accent colors, ensuring a cohesive and professional look and feel.

Quick Start

Apply these opinionated constraints to any UI work in this conversation.

Frequently Asked Questions about ui-skills

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

FAQPage Schema
How do I enforce consistent design system rules when building user interfaces with AI?▼

To enforce a consistent design system with AI, you need a set of opinionated constraints that govern technical stack adherence, component usage, and interaction patterns. This ensures AI agents apply a specific design philosophy like Swiss Style for a cohesive look.

What are the best constraints for AI agents generating frontend code with Tailwind CSS?▼

The best constraints for AI agents using Tailwind CSS dictate specific component usage, accessibility considerations, and performance optimizations. Applying strict interaction patterns and animation principles ensures high-quality, consistent frontend code generation.

Does this UI design skill work with shadcn-svelte components?▼

Yes, this UI design skill works with shadcn-svelte components by enforcing technical stack adherence. It governs how these components should be used, ensuring accessibility considerations and interaction patterns align with the defined design philosophy.

How do I apply Swiss Style design principles to an AI generated dashboard?▼

To apply Swiss Style principles to an AI generated dashboard, invoke a constraint system that automatically defines the grid system, typography rules, and use of accent colors. This ensures the AI agent produces a cohesive and professional look.

Can I set specific animation and performance boundaries for AI coding assistants?▼

Yes, you can set specific animation and performance boundaries for AI coding assistants by applying a governance skill. It dictates clear animation principles and performance optimizations to ensure generated user interfaces meet technical quality standards.