이 콘텐츠는 아직 사용자의 언어로 제공되지 않아 영어로 표시됩니다.

shadcn/Tailwind Layouts

Skill 확인됨

Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.

AI 요약

This skill explains fundamental CSS layout principles like height inheritance and flexbox behavior, which are often misunderstood by AI agents. It offers detailed explanations, common patterns, and diagnostic steps for resolving layout issues in shadcn/ui and Tailwind CSS projects.

Versioning

info:Release ManagementA version ('1.0') is present in the SKILL.md frontmatter, but there are no GitHub release tags or CHANGELOG, and the commit date is unavailable.

설치

npx skills add jwynia/agent-skills

Vercel skills CLI(skills.sh)를 npx로 실행합니다. 로컬에 Node.js와 skills 호환 에이전트(Claude Code, Cursor, Codex 등) 중 하나 이상이 설치되어 있어야 합니다. 저장소가 agentskills.io 형식을 따른다고 가정합니다.

2 months ago

jwynia

70 stars

MIT

2 days ago에 업데이트됨

소스 코드 보기

유사한 확장

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

Skill

jwynia

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Skill

bytedance

Frontend Design Skill

Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.

Skill

answerzhao

react-is

Brand checking of React Elements.

Skill

facebook

TanStack React Start Patterns

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

Skill

clerk

Next.js: useSearchParams with Suspense Pattern

Pattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when accessing URL query parameters in client components. Use when building search interfaces, filters, pagination, or any feature that needs to read/manipulate URL query parameters client-side.

Skill

wsimmonds