skills/ secondsky/claude-skills

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.

0
Installs
—
Rating
—
Success rate
1
Files scanned
Scan passedmobile
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

1 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 7d76ca1667974ae2… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

Mobile-First Design

Design interfaces starting with mobile as the foundation, then enhance for larger screens.

Breakpoints

NameWidthDevices
Mobile320-480pxiPhone SE, small Android
Tablet481-768pxiPad mini
Desktop769-1024pxiPad Pro, laptops
Large1025px+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

MetricTarget
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

Files

1
1.9 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from secondsky/claude-skills8

[TODO: lowercase-hyphen-case-name]

[TODO: Write comprehensive description in third-person. Start with "This skill provides..." or "This skill should be used when..."] [TODO: Add "Use when" scenarios - specific situations where Claude should use this skill] [TODO: Add keywords - technologies, use cases, error messages that should tr

Scan passed 0
aceternity-ui

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.

Scan passed 0
api-authentication

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.

Scan passed 0
api-changelog-versioning

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.

Scan passed 0
api-contract-testing

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.

Needs review 0
api-design-principles

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.

Scan passed 0
api-error-handling

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.

Scan passed 0
api-filtering-sorting

Builds flexible API filtering and sorting systems with query parameter parsing, validation, and security. Use when implementing search endpoints, building data grids, or creating dynamic query APIs.

Scan passed 0

Related mobile skillsscan passed

swift-concurrency-6-2

Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types. Use when adopting Swift 6.2 concurrency — offloading with @concurrent or resolving main-actor isolation.

Scan passed 0
ios-sync

Regenerate the iOS debug bridge against the latest upstream gstack templates. (gstack)

Scan passed 0
ce-test-xcode

Test iOS apps in a simulator with XcodeBuildMCP. Use when iOS changes need simulator evidence before handoff.

Scan passed 0
error-tracking-react-native

PostHog error tracking for React Native

Scan passed 0
xcode-project-setup

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

Scan passed 0
aws-sdk-swift-usage

AWS SDK for Swift development patterns. Use when writing Swift code that uses AWS services via aws-sdk-swift package.

Scan passed 0