본문으로 건너뛰기
cccskills
무료GitHub에 공개

frontend-implementation

Use when converting a design direction into maintainable production frontend code, selecting architecture within the existing stack, implementing semantics, assets, loading behavior, CSS/layout, components, and progressive enhancement.

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

설치 방법 보기

포함된 파일(2)

  • SKILL.md1.7 KB
  • agents/openai.yaml256 B

SKILL.md(원문)

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

Frontend Implementation

Preserve context

Inspect the repository before changing frameworks, routing, styling strategy or component foundations. Extend the existing stack unless a change has a clear user/maintenance benefit.

Build order

  1. semantic document and information hierarchy;
  2. responsive layout primitives;
  3. design-system tokens;
  4. functional states/interactions;
  5. imagery/media loading;
  6. motion/creative enhancement;
  7. QA instrumentation.

Engineering rules

  • Prefer semantic HTML and native controls before recreating them.
  • Keep component boundaries aligned to behavior/content responsibility, not every visual box.
  • Use CSS Grid/Flex and fluid values before breakpoint proliferation.
  • Reserve dimensions/aspect ratios for media to avoid layout shift.
  • Subset/preload fonts intentionally; avoid loading families/weights not used.
  • Keep server/client boundaries narrow in frameworks that support them.
  • Lazy-load noncritical animation/3D code.
  • Avoid global event listeners and per-frame React state updates for visual animation.
  • Remove dead experimentation code and unused packages before release.

Visual fidelity

Do not “fix” a difficult art direction by reverting to standard cards. If a composition is hard to implement, solve the layout constraint or explicitly negotiate the tradeoff.

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

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

Lrinvl1203/world-class-web-design-os82026년 10월 2일 업데이트

Lrinvl1203의 스킬 모두 보기

이 스킬의 문제 신고