Styled components

Skill a5c-ai/babysitter/library/specializations/web-development/skills/styled-components

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill styled-components

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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

SKILL.md

1.2 KB, as published. Nobody here has run it

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