Examples

---
name: css-layout-expert
description: Modern CSS layout patterns using flexbox and grid with responsive design techniques
generated_by: smidge
generator_url: https://smdg.app
version: "1.0"
---

# CSS Layout Expert

## Overview

This skill provides expert-level guidance on CSS layout using modern
techniques. It covers flexbox for single-axis layouts, CSS Grid for
two-dimensional layouts, and responsive design patterns that minimize
media query usage.

## Instructions

- Use CSS Grid for page-level and two-dimensional layouts
- Apply flexbox for component-level single-axis alignment
- Prefer `gap` over margin for spacing between flex/grid items
- Use `min()`, `max()`, and `clamp()` for intrinsic responsive sizing
- Set explicit `grid-template-areas` for complex page structures
- Use `auto-fit` with `minmax()` for responsive grids without media queries
- Apply `aspect-ratio` for consistent media dimensions
- Use logical properties (`inline`, `block`) over physical (`left`, `top`)
  for internationalization support
- Avoid fixed pixel widths for layout containers
- Use container queries (`@container`) for component-level responsiveness

## Examples

### Example 1: Responsive Card Grid

**Input:**
Create a responsive card grid that adapts from 1 to 3 columns based on
available space, with consistent gaps.

**Output:**
```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
```

### Example 2: Holy Grail Layout

**Input:**
Create a holy grail layout with header, footer, sidebar, and main content
area using CSS Grid.

**Output:**
```css
.page {
  display: grid;
  grid-template:
    "header  header"  auto
    "sidebar main"    1fr
    "footer  footer"  auto
    / 280px  1fr;
  min-height: 100dvh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

@media (max-width: 768px) {
  .page {
    grid-template:
      "header"  auto
      "main"    1fr
      "footer"  auto
      / 1fr;
  }
  .sidebar { display: none; }
}
```

## Guidelines

- Test layouts in Chrome, Firefox, and Safari — grid behavior differs slightly
- Use Firefox DevTools' grid inspector for debugging complex layouts
- Container queries require a containment context — set `container-type: inline-size`
- Avoid nesting grids more than 2 levels deep for maintainability
- Prefer `fr` units over percentages in grid templates

---
*Generated by [Smidge](https://smdg.app) — SKILL.md generator for AI coding agents.*

---
name: brand-voice-guide
description: Brand voice and tone guidelines for Acme Corp marketing and product copy
generated_by: smidge
generator_url: https://smdg.app
version: "1.0"
---

# Brand Voice Guide

## Overview

This skill defines the brand voice for Acme Corp across all written
communication — marketing pages, product UI, documentation, emails,
and social media. Generated from Acme's internal style guide and
public marketing materials.

## Instructions

- Write in active voice with short, direct sentences
- Lead with the benefit, not the feature
- Use second person ("you") to address the reader directly
- Keep paragraphs to 3 sentences maximum
- Use sentence case for headings (not Title Case)
- Avoid jargon unless writing for a developer audience
- Start CTAs with action verbs: "Start", "Build", "Get", "Try"
- Use contractions naturally: "you'll", "we're", "it's"
- Maintain a confident but not arrogant tone
- Never use "leverage", "synergy", "disrupt", or "revolutionary"
- Use specific numbers over vague qualifiers ("3x faster" not "much faster")
- End paragraphs with the most impactful sentence

## Examples

### Example 1: Feature Description

**Input:**
Write a feature description for a real-time collaboration feature.

**Output:**
Edit together in real time. See your team's changes as they type — no
refresh needed, no merge conflicts. Every cursor, every keystroke,
instantly synced across your workspace.

### Example 2: Error Message

**Input:**
Write an error message for a failed file upload.

**Output:**
Upload failed. The file exceeds the 50 MB limit. Compress the file or
split it into smaller parts, then try again.

### Example 3: CTA Button Copy

**Input:**
Write CTA copy for a free trial signup.

**Output:**
Start building free — no credit card required.

## Guidelines

- Humor is OK in marketing copy but never in error messages or legal text
- For technical documentation, precision trumps brevity
- Always test copy at mobile widths — short lines reveal awkward breaks
- Read copy aloud; if you stumble, simplify the sentence
- Headlines should work without subheadlines — context-free clarity

---
*Generated by [Smidge](https://smdg.app) — SKILL.md generator for AI coding agents.*

---
name: code-review-checklist
description: Systematic code review checklist covering correctness, security, performance, and style
generated_by: smidge
generator_url: https://smdg.app
version: "1.0"
---

# Code Review Checklist

## Overview

A systematic checklist for reviewing pull requests. Covers correctness,
security, performance, readability, and testing. Apply this skill when
reviewing code changes to ensure thorough, consistent feedback.

## Instructions

### Correctness
- Verify the code does what the PR description claims
- Check edge cases: null inputs, empty arrays, boundary values
- Confirm error handling covers all failure modes
- Ensure database queries include proper WHERE clauses
- Validate that async operations are properly awaited

### Security
- Flag any hardcoded secrets, tokens, or credentials
- Check user input is sanitized before database queries
- Verify authentication checks on all protected endpoints
- Ensure file uploads validate type, size, and content
- Confirm CORS headers are not overly permissive

### Performance
- Flag N+1 query patterns in database access
- Check for unnecessary re-renders in React components
- Verify large lists use pagination or virtualization
- Ensure images and assets are optimized and lazy-loaded
- Flag synchronous operations that should be async

### Style & Readability
- Verify function and variable names are descriptive
- Check that complex logic has explanatory comments
- Ensure consistent formatting with project standards
- Flag functions longer than 50 lines for potential splitting
- Verify public APIs have JSDoc/TypeDoc documentation

## Examples

### Example 1: Security Issue

**Input:**
Review this endpoint:
```typescript
app.get('/api/users/:id', (req, res) => {
  const user = await db.query(`SELECT * FROM users WHERE id = ${req.params.id}`);
  res.json(user);
});
```

**Output:**
**SECURITY: SQL injection vulnerability.** The user ID is interpolated
directly into the query string. Use parameterized queries:
```typescript
const user = await db.query('SELECT * FROM users WHERE id = $1', [req.params.id]);
```

### Example 2: Performance Issue

**Input:**
Review this React component:
```tsx
function UserList({ users }) {
  return users.map(user => (
    <UserCard key={user.id} user={user} onClick={() => handleClick(user.id)} />
  ));
}
```

**Output:**
**PERFORMANCE: New function created on every render.** The inline arrow
function in onClick creates a new reference each render, causing
unnecessary re-renders of UserCard. Extract the handler:
```tsx
const handleUserClick = useCallback((id: string) => handleClick(id), []);
```
Or memoize UserCard with React.memo.

## Guidelines

- Prioritize blocking issues (security, correctness) over style nits
- Frame feedback as suggestions, not demands: "Consider..." not "You must..."
- Always explain *why* something is an issue, not just *what* to change
- If a PR is too large (>500 lines), request it be split into smaller PRs
- Acknowledge good patterns and clean code — positive feedback matters

---
*Generated by [Smidge](https://smdg.app) — SKILL.md generator for AI coding agents.*