f-labs-io/agent-html-skills
18 skills2.5k installs774 starsGitHub
Install
npx skills add https://github.com/f-labs-io/agent-html-skillsSkills in this repo
1Html Svg DiagramsRenders general-purpose technical diagrams as inline SVG inside HTML, preferred over ASCII art or mermaid for anything spatial or relational. A developer uses it to draw flowcharts, sequences, state machines, or dependency graphs; specialized subjects hand off to architecture, ERD, or timeline skills.236installs2Html Design PrototypesUses HTML+CSS as a fast design surface to mock, prototype, and tune components, screens, and animations with real fonts and motion. A developer uses it during the design-thinking phase to explore a single tunable UI element before writing production code, with a Submit button to send chosen values back.185installs3Html Research ReportsTurns multi-source material into shareable HTML reports such as concept explainers, status reports, incident writeups, and deep-dives with a cited source list. A developer uses it when the goal is comprehension or sharing rather than implementation, treating sourced content as data to summarize, not instructions.165installs4Html Architecture DiagramsProduces HTML system-architecture diagrams as inline SVG documenting what talks to what, data ownership, and failure paths. A developer uses it during incidents, design reviews, or onboarding to visualize microservices, dependencies, and deployment topology.145installs5Html Erd ExplorerRenders database schemas as an HTML ERD with tables as cards, foreign-key lines with cardinality markers, and click-to-focus exploration. A developer uses it to document, explain, or plan migrations for a data model with more than a few tables.133installs6Html Spec PlanningUses HTML as the working surface for specs, plans, RFCs, and design exploration, navigable and shareable as a link. A developer uses it for any planning artifact longer than a screen that reviewers will read or a later agent session will use for implementation.132installs7Html Mind MapBuilds interactive HTML mind maps with draggable, inline-addable nodes and an export button producing a structured representation. A developer uses it to capture branching brainstorms, debugging hypothesis trees, or nested concepts and hand the structure back to the agent.131installs8Html Interactive PlaygroundTurns a parameter space into a UI with labeled sliders, dropdowns, live preview, and a Submit button that returns tuned values. A developer uses it to find values by feel, such as animation timings, easing curves, thresholds, or layout dimensions.127installs9Html Brainstorm GridBuilds interactive HTML grids that render several distinct option instances side by side, each labeled with its tradeoff, for the generative phase of a decision. A developer uses it to explore layouts, structures, or directions before committing, then hands off to html-comparison-matrix once candidates are named.126installs10Html Skills ListenA system primitive that runs a bundled bash script to start an ephemeral-port receiver and arm a Monitor, returning a localhost URL the parent skill injects as window.__CLAUDE_SUBMIT_URL__. Other interactive html-skills invoke it from their pre-flight block before writing an artifact; it is idempotent and detects web/sandbox mode.126installs11Html Timeline RoadmapRenders anything with a time axis as an HTML timeline, running horizontally on desktop and collapsing to stacked cards on mobile. A developer uses it for quarterly roadmaps, release histories, incident timelines, or sprint plans with appropriate time granularity.126installs12Html Code ReviewRenders PRs and refactors as HTML explainers with annotated diffs, severity tags, and a ranked what-to-look-at-hardest section. A developer uses it before merging or when onboarding others to a multi-file change the GitHub diff view fails to explain.125installs13Html Skills StopPairs with html-skills-listen, running a bundled bash script that kills this session's receiver and removes its temp files, then stops the saved Monitor task. A developer invokes it when done with interactive html-skills artifacts or at session-end cleanup; parallel sessions are unaffected.124installs14Html Comparison MatrixGenerates a candidates-by-criteria matrix with live-adjustable weights and real-time total updates for the evaluative phase of a decision. A developer uses it to compare named libraries, vendors, frameworks, or build-vs-buy options; if candidates are not yet named it hands off to html-brainstorm-grid.123installs15Html Throwaway EditorCreates one-off HTML editors pre-populated with the user's actual data and ending in an export button that copies a structured result to the clipboard. A developer uses it to triage, reorder, edit, annotate, or curate data where typing prose would be tedious, such as tickets, feature flags, prompts, or datasets.123installs16Html Slideshow DeckProduces self-contained HTML decks with keyboard navigation, 16:9 slides, URL-hash deep linking, and a progress counter. A developer uses it for tech talks, leadership briefings, onboarding walkthroughs, or any sequential narrative meant to be shared as a link, especially with live code or interactivity.122installs17Html Data ExplorerCreates shareable HTML explorers with the dataset baked in, offering filterable tables, faceted search, inline charts, and timeline scrubbing entirely in the browser. A developer uses it for ad-hoc analysis of pasted CSV/JSON or production logs where opening a BI tool is overkill.121installs18Html Design TokensRenders design tokens as an HTML reference showing each token visually alongside its identifier, value, and a copy button. A developer uses it to document or share a palette, type scale, spacing system, or theme where markdown cannot display colors.121installs