본문으로 건너뛰기
cccskills

스킬 찾기

66건(aladicf의 저장소) · 인기순

test

무료

Build or improve UI test coverage for visual regression, interactions, and accessibility. Use when the user asks for a test strategy, automated tests, testing setup, or fixes to flaky UI tests. A one-time browser inspection or visual review does not require a new test suite.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

a11y

무료

Systematically audit and remediate accessibility issues in UI, focusing on keyboard navigation, screen reader support, color contrast, semantic HTML, ARIA usage, and motion sensitivity. Use when the user wants to improve accessibility, make a component accessible, fix WCAG violations, add keyboard support, or ensure screen reader compatibility.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

adapt

무료

Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, coarse-pointer browsers, or cross-context adaptation.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

arrange

무료

Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

audit

무료

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

bolder

무료

Increase visual impact, contrast, personality, and compositional confidence when a design feels bland, generic, or too safe. Use when the design needs more energy, confidence, or memorability—not when the real problem is clutter, over-intensity, or micro-detail polish.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

delight

무료

Add moments of joy, personality, and surprise through success states, empty states, loading moments, hover details, and celebratory polish once the fundamentals already work. Use when the user wants delight, charm, personality, or memorable micro-interactions—not when the main need is baseline cleanup or stronger visual impact.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

depth

무료

Add or refine depth through elevation systems, raised and inset surfaces, layered overlap, and meaningful shadow behavior so interfaces feel structured instead of flat. Use when the user mentions depth, elevation, shadows, layering, flat cards, pressed states, drag feedback, or inset controls.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

distill

무료

Simplify cluttered UI by removing unnecessary elements, choices, features, and structural complexity. Use when the problem is too many controls, options, features, or competing elements—not when the structure is sound and the real issue is only visual intensity or lack of personality.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

extract

무료

Extract reusable components, product patterns, and design tokens into a clearer design system with shared APIs, documented defaults, and better reuse. Use when the user wants to refactor repeated UI, consolidate buttons/cards/forms/sections, build a component library, or turn one-off values into reusable tokens.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

Create distinctive React and Tailwind interfaces with strong hierarchy and polished implementation. Use when building or redesigning pages, flows, or components, or when another better-react-web-ui skill needs shared design guidance. Pair with add-ui for direct implementation or requested alternatives.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

harden

무료

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management, making interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

imagery

무료

Improve how interfaces use photos, screenshots, icons, illustrations, and user-uploaded media so visuals support clarity instead of undermining it. Use when the user mentions images, screenshots, background photos, hero images, icon sizing, user-uploaded media, crops, overlays, or image readability.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

normalize

무료

Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

onboard

무료

Design onboarding and activation flows that help users reach value quickly. Use when the user mentions onboarding, getting started, first-time users, activation, aha moments, or new user flows—not when the work is only the empty-state surface itself.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

quieter

무료

Reduce visual intensity, saturation, and noise while preserving hierarchy and character. Use when the structure is basically sound but the design feels too loud, bold, garish, aggressive, or overstimulating—not when the real problem is structural clutter, too many features, or not enough personality.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

setup

무료

Gather and persist audience, brand, UX goals, React framework, Tailwind setup, and component defaults for future design work. Use when the user asks to establish or update reusable project design guidance. A request to build UI can proceed with existing context without running setup.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트

showcase

무료

Create standout, technically ambitious interfaces that feel extraordinary through cinematic transitions, advanced motion, heavy rendering, or other high-ambition implementation work. Use when the user wants to wow, impress, go all-out, or push a feature beyond conventional UI polish—not when simple visual confidence or routine cleanup is enough.

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

aladicf/better-react-web-ui32026년 9월 8일 업데이트