Babysitter styled-components

Name: styled-components
Author: a5c-ai

Styled Components theming, variants, SSR support, and patterns.

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/styled-components" ~/.claude/skills/a5c-ai-babysitter-styled-components && rm -rf "$T"

manifest: library/specializations/web-development/skills/styled-components/SKILL.md

Styled Components Skill

Expert assistance for CSS-in-JS with styled-components.

Capabilities

Create styled components
Implement theming
Handle SSR
Create variants
Extend components

Patterns

import styled, { css } from 'styled-components';

const Button = styled.button<{ $variant?: 'primary' | 'secondary' }>`
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  ${({ $variant }) =>
    $variant === 'primary' &&
    css`
      background: ${({ theme }) => theme.colors.primary};
      color: white;
    `}
`;

// Theming
const theme = {
  colors: { primary: '#3b82f6' },
};

<ThemeProvider theme={theme}>
  <Button $variant="primary">Click me</Button>
</ThemeProvider>

Target Processes

react-application-development
theming-implementation
component-library