메뉴
Guide for creating responsive layouts with CSS. Use when implementing responsive design or fixing layout issues.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | css-responsive-design |
| description | Guide for creating responsive layouts with CSS. Use when implementing responsive design or fixing layout issues. |
Follow this mobile-first approach to create responsive layouts:
Define breakpoints from small to large:
/* Mobile (default) */
.container {
padding: 1rem;
width: 100%;
}
/* Tablet (768px and up) */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 768px;
margin: 0 auto;
}
}
/* Desktop (1024px and up) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
.flex-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.flex-container {
flex-direction: row;
}
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
Use clamp for fluid typography:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
}
p {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* Modern responsive images */
.responsive-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card-container {
container-type: inline-size;
}
.card {
padding: 1rem;
}
@container (min-width: 400px) {
.card {
padding: 2rem;
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Checklist for auditing and fixing accessibility issues (WCAG 2.1 AA compliance). Use when reviewing components or pages for accessibility.
Guide for creating RESTful API endpoints with validation and error handling. Use when implementing backend API routes.
Guide for implementing secure authentication with JWT and session management. Use when adding authentication to an application.
Guide for designing database schemas with Prisma ORM. Use when creating or modifying database models.
Guide for consistent error handling across frontend and backend. Use when implementing error handling logic.
Guide for implementing form handling with React Hook Form and Zod validation. Use when creating forms with validation.