Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

add-shadcn-ui

Étoiles2

Forks0

Mis à jour23 juin 2026 à 07:58

Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

HUMBLEF0OL

HUMBLEF0OL/portfolio

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·SOC 15-1254

SKILL.md

readonly

name	add-shadcn-ui
description	Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".

Using shadcn/ui here

Config is in components.json: style new-york, RSC enabled, base color stone, icons via lucide-react. Primitives live in src/components/ui/.

Add a new primitive

npx shadcn@latest add <component>

This drops the file into src/components/ui/. Existing ones: button, card, carousel, drawer, input, select, tabs, textarea.

Aliases (from components.json)

@/components, @/components/ui, @/lib, @/lib/utils (the cn() helper), @/hooks.

Conventions

Import primitives from @/components/ui/<name>.
Compose with cn() for conditional classes; use theme tokens, not raw colors.
Tailwind v4 is CSS-first (src/app/globals.css) — there is no tailwind.config.
Don't hand-edit generated primitives unless intentionally customizing; prefer re-running the CLI or wrapping the component.
Any user-facing text inside UI must still go through next-intl (see add-translations skill).
For the cyber look, wrap/extend primitives with angular-clip utilities and AngularFrame corners rather than editing the base primitive.

Verify

npm run lint.

Plus depuis ce dépôt

même dépôt

i18n

HUMBLEF0OL/portfolio

next-intl i18n conventions for the portfolio — locale routing, message catalogs (3 locales), translation helpers, locale switcher, and middleware locale detection. Use when adding or translating pages, adding message keys, or touching anything under src/i18n or messages.

2026-06-242

add-section

HUMBLEF0OL/portfolio

Create a new page section/block component for this Next.js + next-intl portfolio, following the project's Server/Client split, i18n, and angular-frame design conventions. Use when asked to "add a section", "new block", "create a component for the page", "add About/Projects/Skills-style section", or build any new piece of the portfolio UI.

2026-06-232

add-translations

HUMBLEF0OL/portfolio

Add or update internationalized (i18n) copy across all locales in this next-intl portfolio. Use whenever introducing or changing any user-facing string, label, section title, or data key. Trigger on "add text", "new copy", "translate", "add a key", "update wording", "i18n", "new section title", or any task that surfaces visible text.

2026-06-232

architecture

HUMBLEF0OL/portfolio

Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.

2026-06-232

components

HUMBLEF0OL/portfolio

React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating page sections or shared components.

2026-06-232

context7

HUMBLEF0OL/portfolio

Use before writing or referencing any stack library — fetches version-accurate docs via the context7 MCP server so call signatures, hooks, and APIs match what is installed. Invoke on first usage of any stack library, on any non-trivial Next.js API, or when uncertain whether an API is current.

2026-06-232

name	add-shadcn-ui
description	Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".

Using shadcn/ui here

Config is in components.json: style new-york, RSC enabled, base color stone, icons via lucide-react. Primitives live in src/components/ui/.

Add a new primitive

npx shadcn@latest add <component>

This drops the file into src/components/ui/. Existing ones: button, card, carousel, drawer, input, select, tabs, textarea.

Aliases (from components.json)

@/components, @/components/ui, @/lib, @/lib/utils (the cn() helper), @/hooks.

Conventions

Import primitives from @/components/ui/<name>.
Compose with cn() for conditional classes; use theme tokens, not raw colors.
Tailwind v4 is CSS-first (src/app/globals.css) — there is no tailwind.config.
Don't hand-edit generated primitives unless intentionally customizing; prefer re-running the CLI or wrapping the component.
Any user-facing text inside UI must still go through next-intl (see add-translations skill).
For the cyber look, wrap/extend primitives with angular-clip utilities and AngularFrame corners rather than editing the base primitive.

Verify

npm run lint.