Up & Running with GitHub Spec Kit #9 - Adding More Features

Summary of technological concepts / feature work (SpecKit #9)

• Spec-first approach with reuse: The video emphasizes that a SpecKit “spec” defines user-required behavior without implementation details. This means the same spec can be reused across different stacks or storage approaches (e.g., not tied to local storage).
• Iterative feature workflow for coding agents: The presenter runs the full SpecKit cycle again to implement a new feature:
  1. Create a new spec (skipping “constitution/grounding principles” since they don’t change).
  2. Use /clarify to fill in missing details and edge-case behavior.
  3. Use /plan to generate implementation plans and supporting docs/files.
  4. Use /implement to have the coding agent generate the code and UI behavior.
• Feature implemented: Reorder goal items via drag-and-drop (move goals up/down).

Key spec contents (what the feature required)

• Primary user story: Users can drag and drop goal cards to reorder them to reprioritize.
• Functional requirements examples:
  • Start a drag operation by clicking and holding a goal.
  • Maintain goal position/order even after a goal is marked complete/uncompleted.
• Acceptance scenarios include edge cases: These edge cases were later clarified.

/clarify answers (important behavior decisions)

• Auto-scroll while dragging near list edges: When dragging near the top/bottom within ~50–100 pixels, the scrollable list auto-scrolls.
• Default position for new goals: New goals appear at the top of the list.
• Drag visual state: Use a semi-transparent “ghost” appearance for the dragged item.
• Insertion feedback UI: Show where the item will be inserted via a horizontal insertion line / gap spacing / target highlight.
• Keyboard accessibility note: Because a requirement mentions keyboard accessibility (FR10), the system asked for a non-drag method. The presenter chose to skip adding complexity (not implementing the “arrow keys + modifier” approach they described).

Planning / tooling choices

• No tests for this demo: The presenter explicitly opts for “No testing whatsoever” (no unit/integration tests) because it’s a throwaway project.
• Implementation strategy requested:
  • Use a sortable library for drag sorting.
  • Use Tailwind CSS for styling.
• Generated artifacts: The agent produces many plan-related documents/contracts and updates auxiliary agent instruction files.
  • Mentioned conventions include agents.md and Copilot instruction files, updated based on project needs.

Implementation result / verification notes

• Drag-and-drop works during the session (goals can be rearranged).
• Ordering resets after refresh: The new order is not persisted to local storage. Persistence could be added later, but the presenter is satisfied for the demo.

Main speakers / sources

• Primary speaker: The YouTube channel host/presenter (narrator in the subtitles; mentions Net Ninja branding and Net Ninja Pro).
• Source/tooling: SpecKit (coding agent framework) and suggested libraries:
  • sortable (for list sorting)
  • Tailwind CSS (for UI styling)