100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新
無料GitHub で公開
mobile-first-design
Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.
含まれるファイル（1）
- SKILL.md1.9 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Mobile-First Design
Design interfaces starting with mobile as the foundation, then enhance for larger screens.
Breakpoints
| Name | Width | Devices |
|---|---|---|
| Mobile | 320-480px | iPhone SE, small Android |
| Tablet | 481-768px | iPad mini |
| Desktop | 769-1024px | iPad Pro, laptops |
| Large | 1025px+ | Desktop monitors |
Mobile-First CSS
/* Base styles (mobile) */
.container {
padding: 1rem;
}
.nav {
display: none; /* Hidden on mobile */
}
.nav-toggle {
display: block; /* Hamburger visible */
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 720px;
margin: 0 auto;
}
.nav {
display: flex;
}
.nav-toggle {
display: none;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
Touch-Friendly Design
/* Minimum touch target: 48x48px */
.button {
min-height: 48px;
min-width: 48px;
padding: 12px 24px;
}
/* Adequate spacing */
.list-item {
padding: 16px;
margin-bottom: 8px;
}
Performance Requirements
| Metric | Target |
|---|---|
| First Contentful Paint | <3s on 3G |
| JS bundle | <100KB gzipped |
| Total page weight | <500KB |
Progressive Enhancement
<!-- Layer 1: Semantic HTML (works without CSS/JS) -->
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
<!-- Layer 2: CSS enhances appearance -->
<!-- Layer 3: JS adds interactivity -->
Best Practices
- Start design at 320px width
- Use relative units (rem, %, vw)
- Test on real devices
- Optimize images for mobile
- Minimize JavaScript for initial load
- Ensure readable text without zooming
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Secure API authentication with JWT, OAuth 2.0, API keys. Use for authentication systems, third-party integrations, service-to-service communication, or encountering token management, security headers, auth flow errors.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新
Creates comprehensive API changelogs documenting breaking changes, deprecations, and migration strategies for API consumers. Use when managing API versions, communicating breaking changes, or creating upgrade guides.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新
Verifies API contracts between services using consumer-driven contracts, schema validation, and tools like Pact. Use when testing microservices communication, preventing breaking changes, or validating OpenAPI specifications.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新
Implements standardized API error responses with proper status codes, logging, and user-friendly messages. Use when building production APIs, implementing error recovery patterns, or integrating error monitoring services.
日本語の概要は準備中です。原文の説明を表示しています。
secondsky/claude-skills2292026年9月28日 更新