flpbalada/fb-skills

1

progressive-disclosure Reveal complexity in stages so users see what they need when they need it. Use for onboarding, forms, settings, advan…

flpbalada/fb-skills

35

2

discuss-task Build shared understanding before action by interviewing the user about ambiguous implementation, product, planning, …

flpbalada/fb-skills

25

3

to-prd Convert a discussion into a concise PRD covering users, the problem, requirements, technical implementation, and cons…

flpbalada/fb-skills

22

4

project-structure Organize React, Next.js, or TypeScript projects with feature-based architecture.

flpbalada/fb-skills

20

5

code-architecture-tailwind-v4-best-practices Choose Tailwind CSS v4 component styling patterns.

flpbalada/fb-skills

18

6

code-simplifier Simplify recently changed code without changing behavior. Use after implementation when working code has excess nesti…

flpbalada/fb-skills

18

7

discuss-code Discuss code critically before or instead of editing. Use when user asks for a compact opinion on code, a diff, snipp…

flpbalada/fb-skills

17

8

five-whys Trace a specific problem to systemic root causes with Five Whys. Use when investigating incidents, recurring bugs, ch…

flpbalada/fb-skills

17

9

react-useeffect-avoid Avoid unnecessary React useEffect and choose better alternatives. Use when reviewing effects, derived state, prop-to-…

flpbalada/fb-skills

17

10

architecture-review Review software architecture before editing.

flpbalada/fb-skills

16

11

code-architecture-wrong-abstraction Decide whether to abstract, duplicate, inline, or split code. Use when creating shared utilities, components, facades…

flpbalada/fb-skills

16

12

decompose Split an oversized component into focused helpers, hooks, and sub-components.

flpbalada/fb-skills

16

13

deep-thinker Analyze ambiguous problems, hard decisions, root causes, product strategy, or tradeoffs with useful frameworks, assum…

flpbalada/fb-skills

16

14

typescript-advanced-types Design readable advanced TypeScript types. Use when creating reusable type utilities, generics, conditional types, ma…

flpbalada/fb-skills

16

15

cognitive-biases Identify cognitive biases shaping product decisions and user behavior. Use when auditing decision points, conversion …

flpbalada/fb-skills

15

16

cognitive-fluency-psychology Improve clarity by making content and interfaces easier to process. Use when auditing readability, hierarchy, labels,…

flpbalada/fb-skills

15

17

conventional-commit Draft or review Conventional Commits messages with type, optional scope, imperative summary, body, footer, and breaki…

flpbalada/fb-skills

15

18

curiosity-gap Create ethical information gaps that earn attention and resolve with real payoff. Use when writing headlines, notific…

flpbalada/fb-skills

15

19

react-key-prop Choose correct React key props for lists and remounts.

flpbalada/fb-skills

15

20

typescript-best-practices Improve TypeScript safety, readability, and maintainability.

flpbalada/fb-skills

15

21

typescript-interface-vs-type Choose TypeScript interface vs type aliases. Use when defining object shapes, class contracts, unions, tuples, functi…

flpbalada/fb-skills

15

22

cognitive-load Reduce unnecessary mental effort with Cognitive Load Theory. Use when complex workflows, onboarding, forms, informati…

flpbalada/fb-skills

14

23

css-container-queries Apply CSS container queries for parent-size responsive components. Use when cards, widgets, panels, sidebars, forms, …

flpbalada/fb-skills

14

24

deliberate-practice Design focused practice loops for skill improvement. Use when learning a skill, breaking a plateau, creating training…

flpbalada/fb-skills

14

25

dogfood Dogfood a web app or local URL with exploratory QA, bug hunt, UX review, console checks, screenshots, videos, repro s…

flpbalada/fb-skills

14

26

effort-estimator Estimate engineering effort from scope, risk, unknowns, and verification cost. Use when sizing features, splitting wo…

flpbalada/fb-skills

14

27

react-use-callback Decide when to use React useCallback. Use when callback identity affects memoized children, dependency arrays, custom…

flpbalada/fb-skills

14

28

react-use-client-boundary Place React and Next.js "use client" boundaries correctly. Use when adding client components, hooks, event handlers, …

flpbalada/fb-skills

14

29

react-use-state Use React useState for simple local component state. Use when adding UI state, inputs, counters, selected IDs, active…

flpbalada/fb-skills

14

30

typescript-satisfies-operator Choose TypeScript satisfies, type annotations, as const, or assertions. Use when validating config objects, route map…

flpbalada/fb-skills

14

31

agent-harness-orchestration Coordinate multiple coding agents in shared repos with task packets, worktree or branch isolation, path ownership, ve…

flpbalada/fb-skills

13

32

evaluator-optimizer Run an evaluator-optimizer loop by generating candidate outputs, scoring against a rubric or tests, revising, and sto…

flpbalada/fb-skills

13

33

fogg-behavior-model Diagnose behavior change with B=MAP motivation, ability, and prompt. Use when users do not take a target action, onbo…

flpbalada/fb-skills

13

34

game-theory-tit-for-tat Use Tit for Tat to manage repeated interactions with reciprocity, cooperation, and boundaries.

flpbalada/fb-skills

13

35

graph-thinking Model complex systems as nodes, edges, flows, and dependencies. Use when mapping stakeholder networks, causal loops, …

flpbalada/fb-skills

13

36

jobs-to-be-done Reframe product strategy around customer progress with Jobs to Be Done.

flpbalada/fb-skills

13

37

making-product-decisions Make structured product decisions with explicit goals, options, tradeoffs, evidence, and decision records.

flpbalada/fb-skills

13

38

naming-cheatsheet Name code identifiers clearly and consistently.

flpbalada/fb-skills

13

39

para-method Organize information into Projects, Areas, Resources, and Archives. Use when setting up notes, files, knowledge bases…

flpbalada/fb-skills

13

40

react-hook-form Build or refactor React forms with React Hook Form.

flpbalada/fb-skills

13

41

requirements-analyzer Analyze feature requirements for clarity, scope, risk, assumptions, and testability before implementation. Use when s…

flpbalada/fb-skills

13

42

tailwind-v4-configuration Configure Tailwind CSS v4 with the CSS-first setup.

flpbalada/fb-skills

13

43

trust-psychology Add trust signals that reduce perceived risk before important user actions.

flpbalada/fb-skills

13

44

business-model-canvas Map value creation, delivery, and capture with the Business Model Canvas. Use when evaluating startups, pivots, produ…

flpbalada/fb-skills

12

45

code-reviewer Review code for concrete defects and ranked risk.

flpbalada/fb-skills

12

46

electron Automate or test Electron desktop apps through agent-browser and Chrome DevTools Protocol, including Slack, VS Code, …

flpbalada/fb-skills

12

47

hypothesis-tree Break ambiguous questions into mutually useful hypotheses and tests. Use when validating product ideas, debugging unc…

flpbalada/fb-skills

12

48

kaizen Improve processes through small continuous changes, waste reduction, and PDCA cycles.

flpbalada/fb-skills

12

49

playwright-accessibility-testing Write, review, or fix Playwright accessibility tests with @axe-core/playwright.

flpbalada/fb-skills

12

50

playwright-best-practices Write, review, or fix resilient Playwright tests around user-visible behavior. Use for locators, web-first assertions…

flpbalada/fb-skills

12