From coding-agent
Visual design principles for building polished, professional UIs. Use when creating or styling frontend components to ensure they look intentional and refined, not generic or developer-default.
npx claudepluginhub devjarus/coding-agentThis skill uses the workspace's default tool permissions.
Visual design principles that transform functional UI into polished, professional interfaces.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Visual design principles that transform functional UI into polished, professional interfaces.
| ID | Rule | Priority |
|---|---|---|
| DES-01 | Visual hierarchy | CRITICAL |
| DES-02 | Spacing and rhythm | CRITICAL |
| DES-03 | Color usage | CRITICAL |
| DES-04 | Typography | HIGH |
| DES-05 | Component polish | HIGH |
| DES-06 | Layout patterns | HIGH |
| DES-07 | Empty states | MEDIUM |
| DES-08 | Design references | MEDIUM |