Flex

Generate CSS Flexbox layouts using interactive CLI commands. Use when building responsive flex containers, rows, columns, or alignment configurations.

Security Scan

The skill's code and runtime instructions are consistent with a local CLI tool that creates and stores CSS flex layouts in ~/.flex — no unexpected network access or unrelated credential requests were found in the provided files, though the script content in the prompt was truncated so full-file verification is recommended.

Purpose & Capability

Name and description (CSS Flexbox layout generator) align with the included script and SKILL.md: commands create/modify/export flex layouts and the tool stores layouts as JSONL in ~/.flex/data.jsonl.

Instruction Scope

Instructions and the script operate locally (bash + Python), read/write only to ~/.flex/data.jsonl, and do not reference external services or unrelated system paths. Note: the tool requires write access to the user's home directory (~/.flex) which is expected for a local CLI but is persistent storage.

Install Mechanism

No install specification is provided (instruction-only with an included script), so nothing is downloaded or installed by the registry. This is low-risk from an install perspective.

Credentials

The skill declares no required environment variables or credentials and the code does not attempt to read secrets or unrelated env vars (it sets and uses only local env vars to pass arguments to embedded Python). This is proportionate to its purpose.

Persistence & Privilege

The skill writes persistent data to ~/.flex/data.jsonl and creates the ~/.flex directory. It does not request always:true and does not modify other skills or system-wide settings. Persistent local storage is expected but users should be aware data is stored in their home directory.

Assessment

This skill appears coherent for generating and storing local CSS Flexbox layouts: it uses bash and embedded Python to create and update JSONL records under ~/.flex and to export CSS. Before installing, review the full scripts/script.sh (the prompt content was truncated) to confirm there are no hidden network calls or commands you don't expect. If you want extra caution, run the script in a sandbox or inside a disposable account, or inspect the full file for any commands that call curl/wget, open network sockets, or read files outside ~/.flex. Back up or delete ~/.flex if you no longer need stored layouts.

Flex — CSS Flexbox Layout Generator

A CLI tool for generating CSS Flexbox layouts. Create flex containers, configure alignment, justify, wrap, gap, and order properties, then export production-ready CSS code.

Prerequisites

• Python 3.8+
• bash shell
• Write access to ~/.flex/

Data Storage

All layout configurations are stored in JSONL format at ~/.flex/data.jsonl. Each record represents a saved flex layout with all its properties.

Commands

Run commands via: bash scripts/script.sh <command> [arguments...]

create

Create a new flex container layout with a name and optional initial properties.

bash scripts/script.sh create --name "navbar" --direction row --items 5
bash scripts/script.sh create --name "sidebar" --direction column

Arguments:

• --name — Layout name (required)
• --direction — Flex direction: row, column, row-reverse, column-reverse (optional, default: row)
• --items — Number of child items (optional, default: 3)

row

Create a quick horizontal row layout preset.

bash scripts/script.sh row --name "header-row" --items 4
bash scripts/script.sh row --name "card-grid" --gap 16

Arguments:

• --name — Layout name (required)
• --items — Number of items (optional, default: 3)
• --gap — Gap in pixels (optional, default: 0)

column

Create a quick vertical column layout preset.

bash scripts/script.sh column --name "sidebar-nav" --items 6

Arguments:

• --name — Layout name (required)
• --items — Number of items (optional, default: 3)
• --gap — Gap in pixels (optional, default: 0)

wrap

Toggle or set flex-wrap on an existing layout.

bash scripts/script.sh wrap --id <layout_id> --value wrap
bash scripts/script.sh wrap --id <layout_id> --value nowrap

Arguments:

• --id — Layout ID (required)
• --value — Wrap value: wrap, nowrap, wrap-reverse (optional, default: wrap)

align

Set align-items property on a layout.

bash scripts/script.sh align --id <layout_id> --value center

Arguments:

• --id — Layout ID (required)
• --value — Alignment: flex-start, flex-end, center, stretch, baseline (required)

justify

Set justify-content property on a layout.

bash scripts/script.sh justify --id <layout_id> --value space-between

Arguments:

• --id — Layout ID (required)
• --value — Justify: flex-start, flex-end, center, space-between, space-around, space-evenly (required)

gap

Set the gap property on a layout.

bash scripts/script.sh gap --id <layout_id> --value 16
bash scripts/script.sh gap --id <layout_id> --row 8 --column 16

Arguments:

• --id — Layout ID (required)
• --value — Gap in pixels (optional)
• --row — Row gap in pixels (optional)
• --column — Column gap in pixels (optional)

order

Set the order of a specific child item within a layout.

bash scripts/script.sh order --id <layout_id> --item 2 --value -1

Arguments:

• --id — Layout ID (required)
• --item — Item index, 1-based (required)
• --value — Order value (required)

grow

Set flex-grow for a child item.

bash scripts/script.sh grow --id <layout_id> --item 1 --value 2

Arguments:

• --id — Layout ID (required)
• --item — Item index (required)
• --value — Flex-grow value (required)

shrink

Set flex-shrink for a child item.

bash scripts/script.sh shrink --id <layout_id> --item 3 --value 0

Arguments:

• --id — Layout ID (required)
• --item — Item index (required)
• --value — Flex-shrink value (required)

export

Export a layout or all layouts as CSS code.

bash scripts/script.sh export --id <layout_id>
bash scripts/script.sh export --all --output layouts.css

Arguments:

• --id — Export a specific layout (optional)
• --all — Export all layouts (optional)
• --output — Output file path (optional, default: stdout)

help

Display help information and list all available commands.

bash scripts/script.sh help

version

Display the current tool version.

bash scripts/script.sh version

Examples

# Create a navigation bar
bash scripts/script.sh create --name "navbar" --direction row --items 5
bash scripts/script.sh justify --id abc123 --value space-between
bash scripts/script.sh align --id abc123 --value center
bash scripts/script.sh export --id abc123

# Quick card grid
bash scripts/script.sh row --name "cards" --items 4 --gap 16
bash scripts/script.sh wrap --id def456 --value wrap

# Export everything
bash scripts/script.sh export --all --output flex-layouts.css

Notes

• Each layout stores complete flex properties: direction, wrap, align, justify, gap, and per-item grow/shrink/order
• The export command generates clean, production-ready CSS with class names derived from layout names
• Use row and column shortcuts for common patterns instead of create
• Item properties (grow, shrink, order) are stored per item index within each layout

---

Powered by BytesAgain | bytesagain.com | [e-mail]