applying-ui-design-system
From the author
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens, component patterns, dark mode, and a11y constraints.
Install
npx skills add telagod/code-abyss --skill applying-ui-design-system -a claude-code
Installs to .claude/skills/applying-ui-design-system/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 80
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- form-styletonone-ai/tononeUse when asked to select a UI style, choose a design direction, pick a visual approach for a product, or match a style to an industry. Examples: "what style fits a fintech app", "choose between neumorphism and glassmorphism", "design direction for healthcare SaaS"Design★ 77
- design-guidepaperclipai/paperclipPaperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).Design★ 111.3K
- frontend-designPaulRBerg/agent-skillsUse when creating or substantially redesigning web interfaces, landing pages, dashboards, components, or other frontend UI where visual direction and implementation quality matter. Produces subject-specific art direction, accessible code, and rendered visual verification.Design★ 104
- apply-aestheticplugin87/ux-ui-agent-skillsApply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…), by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.Design★ 3.1K
- ui-stylingMicrock/ordinary-claude-skillsCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.Design★ 409
- frontend-design-systemoikon48/cc-frontend-skillsフロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。Design★ 70
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in