본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills
설치 방법 보기

포함된 파일(1)

  • SKILL.md1.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

adhd

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

adversarial-challenge

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

ai-systems-review

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

asd-ste100

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

branding

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

brutal-truth

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nateslabach/skills62026년 9월 29일 업데이트

nateslabach의 스킬 모두 보기

이 스킬의 문제 신고