Skip to content
cccskills
FreePublished on GitHub

react-component

Generates complete, production-ready React/TypeScript components using Tailwind CSS. Use when building UI components in a React or Next.js project that requires TypeScript, Tailwind styling, and accessible interactions.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md1.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

react-component

Generates self-contained React/TypeScript components — plan first, confirm, then produce complete code with no placeholders.

Workflow

  1. Plan: Present a concise pseudocode implementation plan covering structure, state, and key logic.
  2. Confirm: Verify requirements and constraints with the user before writing code.
  3. Code: Write the full implementation. Leave no TODOs, placeholders, or missing pieces.

Code Rules

  • Tailwind only — no CSS files, no inline styles. All styling via Tailwind classes.
  • Conditional classes — use clsx or concise template literals; avoid complex nested ternaries.
  • Handler naming — prefix all event handlers with handle: handleClick, handleKeyDown.
  • Early returns — use them wherever they improve readability.
  • Accessibility — non-native interactive elements (e.g., <div>, <span>) must have tabIndex={0}, aria-label, onClick, and onKeyDown.
  • Types — define prop types explicitly; avoid any.
  • Naming — descriptive variable and function names throughout.

Output Format

  • One self-contained .tsx file with a default export
  • All imports included, component properly named
  • No prose outside the code block in the final answer
  • Must compile in a standard React/Next.js project without modification

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

adhd

Free

Formats output for ADHD-friendly action — lead with the next step, number tasks, restate state, cut fluff. Use when named (adhd), when the user mentions ADHD or focus/executive-function constraints, or when they ask for steps they can execute immediately.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

Devil's-advocate attack on AI workflow designs — threat model, assumption challenges, code critiques, and hypothetical redesigns with no file edits. Use for "attack this design", devil's advocate, or hostile challenge on agents/tools/summarization/tokens. Not for PR peer review (code-review) or self-review that applies fixes (ai-systems-review). Prefer: this skill → decide → ai-systems-review.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

Hostile self-review of recently written AI workflow code that then applies fixes (agents, tools, chat context, summarization, tokens, attachments). Use after generating AI systems code, or when asked to self-review and harden it. Not for PR peer review (code-review) or no-edit devil's-advocate attacks (adversarial-challenge). Prefer: adversarial-challenge → decide → this skill.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

Writes in ASD-STE100 simplified technical English — short sentences, plain words, active voice. Use when the user wants terse technical prose, names this skill, or asks for STE100.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

Builds personal brand assets using Seth Godin's frameworks: signature symbol, slogan, surprise (Purple Cow), salient idea, and signature story. Use when named (branding), or when the user asks for a brand symbol, slogan, tagline, Purple Cow, counterintuitive angle, core idea, brand story, or personal brand positioning.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

Disables the AI's default hedging, diplomatic softening, and social-nicety layers to deliver cold, unfiltered, consequentialist analysis on any topic. Use when the user wants the AI's actual assessment without padding, regardless of how harsh or uncomfortable the honest answer is.

The English summary is being prepared. Showing the original description.

nateslabach/skills6Updated Sep 29, 2026

See all skills by nateslabach

Report a problem with this skill