ckm-ui-styling
Build Accessible UI with Tailwind and shadcn
Teams need consistent interface guidance that covers components, styling, accessibility, and responsive behavior. This skill provides shadcn/ui, Tailwind CSS, and visual design references for Claude, Codex, and Claude Code workflows.
Stop for confirmation before installing.
Review the plan and obtain explicit user consent before changing files.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "ckm-ui-styling". A settings page needs responsive cards, dark mode, and clear form actions.
Expected outcome:
- A mobile-first layout plan with stacked cards on small screens and grouped panels on desktop.
- Theme guidance for light and dark surfaces, borders, focus rings, and muted text.
- Component recommendations for forms, dialogs, alerts, buttons, and status feedback.
Using "ckm-ui-styling". An existing dialog fails keyboard and screen-reader review.
Expected outcome:
- A checklist of focus trap, escape key, tab order, title, description, and announcement fixes.
- Suggested shadcn and Radix patterns that preserve semantic structure.
- Manual validation steps for keyboard-only use and common screen-reader behavior.
Using "ckm-ui-styling". A team wants consistent Tailwind tokens across product pages.
Expected outcome:
- A token plan for color, spacing, radius, typography, and breakpoint usage.
- Guidance for dark mode variables and component variant naming.
- Recommendations for avoiding one-off classes that weaken system consistency.
Security Audit
High RiskMost static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
Confirmed security concerns (1)
Capability review items (2)
These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.
Risk Factors
⚡ Contains scripts (3)
🔑 Env variables (3)
🌐 Network access (9)
⚙️ External commands (42)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4BibTeX citation
@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Ship a Responsive Product Screen
Create a mobile-first page using shadcn cards, forms, dialogs, and Tailwind spacing rules.
Standardize a Design System
Define tokens, dark mode behavior, component variants, and accessible interaction states for a shared UI system.
Improve Accessibility Coverage
Review focus management, keyboard behavior, form errors, color contrast, and screen-reader announcements.
Try These Prompts
Use ckm-ui-styling to style a responsive shadcn button and card for a simple signup screen.
Create an accessible settings dialog with keyboard navigation, focus states, form messages, and Tailwind dark mode styles.
Define a Tailwind and shadcn theme for a finance dashboard, including tokens, variants, and responsive layout guidance.
Review this React UI for accessibility, layout consistency, dark mode, and shadcn composition. Provide precise changes and validation steps.
Best Practices
- Start with semantic HTML, accessible shadcn primitives, and visible focus states before adding visual polish.
- Use Tailwind utilities consistently, then extract reusable components only when repetition is clear.
- Test layouts at mobile, tablet, desktop, dark mode, and browser zoom before shipping.
Avoid
- Running helper scripts without reviewing the exact package-manager command first.
- Using dynamic Tailwind class names that are hard to scan, purge, or maintain.
- Removing focus indicators or relying only on color to communicate state.
Frequently Asked Questions
What projects does this skill fit best?
Can it create a full design system?
Does it run commands automatically?
Does it support accessibility work?
Can it help with dark mode?
Are the bundled fonts ready to publish?
Developer Details
Author
nextlevelbuilderLicense
MIT
Author version
v1.0.0
Skillstore revision
r1
Repository
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling/Ref
62e2a730c5cd74eab4c7164309d810de660fcea3
Maintenance freshness
7/18/2026
Usage
8 downloads · 15 views
File structure