Agent skill

designing-components

Use this skill when you need to design a component

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

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

SKILL.md

Instructions

  • Follow the rules below to design a component:

Rules

  • Create a seperate css file to style the component
  • Use the tailwind apply directive to style the component
  • Use the @layer components directive to style the component
  • For tailwind 4.1 context, read the following docs:
    • .claude/context/tailwind/tw-v4-theme-variable.md to get the design principles
    • .claude/context/tailwind/tw-v4-custom-styles.md to get the custom styles
    • .claude/context/tailwind/tw-v4-function-and-directives.md to get the functions and directives
    • .claude/context/tailwind/tw-v4-detecting-classes-in-source-files.md to get the detecting classes in source files
    • .claude/context/tailwind/tw-v4-upgrade-guide.md to get the upgrade guide
  • Use nested classes in @layer components for styling parents and children elements
  • Use @utility directives to add custom utilities to the component
  • Use @variant directives to add custom variants to the component
  • Create a new component in srs/components root directory
  • Never touch the files in srs/components/ui directory

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

Emz1998/nexly-notes

tdd-vitest-typescript

Test-Driven Development (TDD) using Vitest and TypeScript. Use when the user requests help with TDD, writing tests before code, test-first development, Vitest test setup, TypeScript testing patterns, unit testing, integration testing, or following the Red-Green-Refactor cycle with Vitest.

1 0
Explore
Emz1998/nexly-notes

specs-creator

Creates detailed specifications from client needs including product specs, technical specs, design specs, and API specs. Use when the user requests help with requirement gathering, creating specifications, documenting client requirements, converting feature requests into structured specs, or needs to formalize project requirements for development handoff.

1 0
Explore
Emz1998/nexly-notes

agile-planning

Generate agile release plans with sprints and roadmaps using unique sprint codes. Use when creating sprint schedules, product roadmaps, release planning, or when user mentions agile planning, sprints, roadmap, or release plans.

1 0
Explore
Emz1998/nexly-notes

tailwind

1 0
Explore
Emz1998/nexly-notes

writing-data

Use this skill when you need to structure data in `srs/data` for the Next.js app

1 0
Explore
Emz1998/nexly-notes

writing-lib-functions

Use this skill when you need to write lib functions in `srs/lib` for the Next.js app

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results