Skills designing-components

📦

designing-components

Content revision r1 Safe ⚙️ External commands

Design Tailwind Components

Teams need consistent component styling without changing shared UI primitives. This skill guides Claude, Codex, and Claude Code to create component CSS with Tailwind conventions and clear file boundaries.

Supports: Claude Codex Code(CC)

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "designing-components" from https://skillstore.io/skills/emz1998-designing-components.md and its manifest at https://skillstore.io/api/skills/emz1998-designing-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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.

Markdown detail GET /skills/emz1998-designing-components.md Signed manifest GET /api/skills/emz1998-designing-components/manifest Signed lockfile GET /api/skills/emz1998-designing-components/lockfile

Test it

Using "designing-components". Design a profile card component for a dashboard.

Expected outcome:

The agent creates a new component, adds a nearby CSS file, and styles the card through Tailwind component layer guidance.

Using "designing-components". Update a settings panel without changing shared UI primitives.

Expected outcome:

The agent keeps protected UI files unchanged and adds feature-level styling in the component area.

Using "designing-components". Add a custom visual state for a component.

Expected outcome:

The agent checks project Tailwind context and uses custom utility or variant guidance only when it matches local conventions.

Security Audit

Safe

v4 • 7/6/2026 Open versioned report

All ten static findings are false positives caused by Markdown inline code backticks in SKILL.md. The file contains component design guidance and local documentation path references, with no evidence of shell execution, prompt injection, network access, secret access, or data exfiltration. No semantic security findings were found.

1

Files scanned

26

Lines analyzed

0

Review items

0

False positives ignored

Risk Factors

⚙️ External commands (10)

SKILL.md:13 SKILL.md:14 SKILL.md:16 SKILL.md:17 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:24 SKILL.md:25

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

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.

Open versioned report

Security Assessment

Copy report link

https://skillstore.io/skills/emz1998-designing-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/emz1998-designing-components/security.svg)](https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-designing-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/emz1998-designing-components.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

Emz1998. (2026). designing-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-designing-components/audits/4

BibTeX citation

@techreport{emz1998-emz1998-designing-components-2026,
  author = {Emz1998},
  title = {designing-components security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/emz1998-designing-components/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "designing-components security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "Emz1998"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/emz1998-designing-components/audits/4"
identifiers:
  - type: other
    value: "skillstore:emz1998-designing-components:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High

55

Architecture

85

Maintainability

87

Content

69

Community

83

Spec Compliance

What You Can Build

Create Feature Components

Build a new feature component with a separate CSS file and Tailwind component layer styling.

Protect Shared UI Files

Add project-specific components while keeping shared UI primitives unchanged.

Apply Tailwind v4 Guidance

Use project Tailwind context before styling a new interface element.

Try These Prompts

Create a Basic Component

Use the designing-components skill to create a new Tailwind component for [feature]. Follow the project component directory rules.

Style an Existing Component

Use the designing-components skill to add a separate CSS file for [component]. Use Tailwind component layer conventions.

Use Tailwind Context

Use the designing-components skill to review the Tailwind v4 context docs before styling [component]. Explain any assumptions before editing.

Refactor Styling Safely

Use the designing-components skill to redesign [component] while preserving shared UI files. Add utilities or variants only when they fit existing conventions.

Best Practices

Confirm the project uses Tailwind 4.1 before following Tailwind-specific context.
Keep component styles near the component and avoid changing shared UI primitives.
Review generated components for responsive behavior and accessibility states.

Avoid

Applying the skill to non-Tailwind projects without adapting the styling guidance.
Editing protected shared UI files when a feature-level component is enough.
Adding custom utilities or variants without checking existing project conventions.

Frequently Asked Questions

What does this skill help me build?

It helps AI agents design frontend components with Tailwind-oriented CSS organization and clear file boundaries.

Does it generate components by itself?

No. It provides instructions that Claude, Codex, or Claude Code can follow during implementation.

Which tools can use it?

The report lists support for Claude, Codex, and Claude Code.

Does it require Tailwind CSS?

Yes. The guidance is built around Tailwind directives, component layers, utilities, and variants.

Are the referenced Tailwind docs included?

The scanned skill package only includes SKILL.md, so target projects should provide those context files.

Can it modify shared UI components?

The skill instructs agents not to touch the shared UI directory named in SKILL.md.

Developer Details

Author

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/Emz1998/nexly-notes/tree/main/archive/skills/code-style/components

Ref

a06681402992ceae98ba04d54cfd4ab004862696

Maintenance freshness

7/21/2026

Usage

5 downloads · 117 views

File structure

More from Emz1998

code-instructor

Teach Code by Building Apps

Learning code can feel abstract when examples are disconnected from real projects. This skill teaches concepts while building working applications step by step.

Coding & Development View

brainstorming-features

Brainstorm App Features with Structured Ideas

Teams need practical feature ideas that connect user value, feasibility, and metrics. This skill guides structured brainstorming for web and mobile app planning.

Productivity View

writing-page-layout

Create compact Next.js page layouts

Next.js page files can become hard to maintain when layout, types, and page logic grow together. This skill guides Claude, Codex, and Claude Code to produce modular page.tsx layouts with separated types.

Coding & Development View

tasks-generator

Generate Project Task Roadmaps

Project teams often struggle to turn specifications into clear implementation work. This skill converts specs into phased tasks with dependencies and verification steps.

Productivity View

implementation-review

Review Implementations Before Commit

Teams can miss plan flaws or code issues when workflow steps move quickly. This skill routes completed plans and implementations to review agents before the next phase.

Coding & Development View

writing-types

Write Modular Next.js Types

Next.js projects can collect large type files that are hard to maintain. This skill guides Claude, Codex, and Claude Code to write small TypeScript types and interfaces in srs/types.

Coding & Development View

ui-design

Design Distinctive UI Prototypes

by tencentcloudbase

Generic AI interfaces often lack visual direction and platform-aware detail. This skill guides Claude, Codex, and Claude Code to define design intent before building prototypes.

Design & Creative View

frontend-design

Design Distinctive Production Frontends

by Atman36

Generic interfaces weaken product identity and usability. This skill guides purposeful visual direction, responsive implementation, motion, accessibility, and production-ready frontend code.

Design & Creative View

shape

Plan UX Before Building

by pbakaus

Teams often build interfaces before clarifying user goals, states, and constraints. This skill guides discovery and produces a design brief for implementation.

Design & Creative View

design-lint

Check designs with deterministic CSS rules

by cubha

Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.

Design & Creative View

ui-ux-designer

Design Accessible Product Interfaces

by sickn33

Teams often struggle to turn user needs into consistent, accessible interfaces. This skill guides research, flows, design systems, tokens, and handoff.

Design & Creative View

react-email

Build React Email Templates

by resend

HTML email work is difficult because email clients render styles differently. This skill guides Claude, Codex, and Claude Code through React Email templates, previews, sending, and accessibility.

Coding & Development View