← All skill packs

UI Design & Frontend Skills

Skill pack
3 skills0 selected
thiagorech1997Skills in this pack

Use when adding a new translation key for next-intl. Triggers on "/add-i18n-key", "adicionar tradução", "nova chave i18n", or whenever a new user-facing string is being introduced. Keeps messages/pt.json and messages/en.json in sync.

English

Use whenever a new sensitive environment variable is introduced (API tokens, database URLs, webhook secrets, signing keys). Triggers on "/add-secret-env", "adicionar env secreta", "nova variável de ambiente sensível". Updates the pino logger redact list so the value never leaks to logs.

English

Use when installing a shadcn/ui component. Triggers on "/add-shadcn", "shadcn add", "instalar componente shadcn", or requests to add UI primitives like button, dialog, etc. Knows the project uses style "base-nova" and Tailwind v4 with inline @theme tokens.

English

Includes Add Internationalization Key, Add Secret Env, and Add Shadcn.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills3CategorycontentStars0

What’s included

Add Internationalization Key

Use when adding a new translation key for next-intl. Triggers on "/add-i18n-key", "adicionar tradução", "nova chave i18n", or whenever a new user-facing string is being introduced. Keeps messages/pt.json and messages/en.json in sync.

Add Secret Env

Use whenever a new sensitive environment variable is introduced (API tokens, database URLs, webhook secrets, signing keys). Triggers on "/add-secret-env", "adicionar env secreta", "nova variável de ambiente sensível". Updates the pino logger redact list so the value never leaks to logs.

Add Shadcn

Use when installing a shadcn/ui component. Triggers on "/add-shadcn", "shadcn add", "instalar componente shadcn", or requests to add UI primitives like button, dialog, etc. Knows the project uses style "base-nova" and Tailwind v4 with inline @theme tokens.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Add Internationalization Key skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: AGPL-3.0. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas