built-with-opus-4-7
AMA · 58:24 · April 22, 2026
← all AMAs

AMA #1 with Thariq

ThariqJason Bigman
watch on vimeo ↗passwordbuiltwithopus4.7
tl;dr

Thariq demos a Remotion video build in Claude Code, covering design-system HTML porting, interview-style planning, /loop for continuous data, skills, verification, and Opus 4.7 quirks.

Overview

Thariq joins Jason for the hackathon's first live session, running an interactive Figma-board brainstorm and a live build while taking Discord questions throughout. The build ports Anthropic's site into a single HTML design-system file, then feeds it into a fresh Remotion project to generate a branded video with terminal, cursor, and button components. Along the way Thariq covers verification strategy, skills vs. sub-agents, claude.md drift, handling continuous data flows, Opus 4.7's more literal instruction-following, and how Claude Design compares to Claude Code for design work. Jason flags a follow-up session with Michael Cohen on Managed Agents the next day.

Topics

jump to any moment
  1. 2:48Figma brainstorm intakeThariq opens a Figma board collecting audience topics: video generation, voice agents, /loop, managed agents, continuous data.
  2. 7:18Design system to HTMLPorting a site's aesthetic into a single HTML design-system file as a portable artifact for future projects.
  3. 16:34Verification approachesUsing linting, custom scripts, and tools like Playwright to give Claude programmatic verification beyond screenshots.
  4. 23:01Interview-style planningPrompting Claude to interview the user using ask-user-a-question to tighten vague specs before building.
  5. 38:27Claude Design vs Claude CodeClaude Design wraps opinionated design workflows; Claude Code offers more code-base context for custom projects.
  6. 38:24Continuous data flowsUsing /loop with a since-filter script every 20 minutes; managed agents suggested for rapidly-changing state.
  7. 41:09Keeping claude.md freshModel updates (Opus 4.7 takes instructions more literally) require revisiting claude.md, skills, and over-constraining rules.
  8. 50:54Repeated mistakes and distributionClaude repeats mistakes when pushed out of distribution; porting code or relaxing arbitrary style rules often helps.

Tips, tricks & feature guides

14 entries

Specifics shared in the session — commands, features, patterns, and rules worth bookmarking.

pattern

Design-system-to-HTML porting

13:28
I've been using HTML as a very portable way of essentially Claude compresses all of this information into an HTML file, and then you can use it in a different project.Thariq

Ask Claude to read a site or code base and compress its visual language into a single HTML design-system file reusable across projects.

  • ·Prompt used: 'look at the code and create a design system HTML file that fully represents the Anthropic design system.'
  • ·Output contained colors, typography, radiuses, shadows, buttons, toggles, chips, badges, and feedback states in one file.
  • ·The HTML file is then copied into a new project (e.g., a Remotion video repo) so the new build inherits the aesthetic.
  • ·Positioned as a hack for non-designers starting new projects.
pattern

Interview-style planning prompt

27:13
Interview me in depth about this using the ask user a question tool. This is the type of prompt I like to do really often, is asking Claude to interview me.Thariq

Append 'interview me in depth about this using the ask-user-a-question tool' to vague prompts so Claude drives spec clarification.

  • ·Used in place of plan mode when the user hasn't fully thought through requirements.
  • ·Claude surfaces new ideas during interview (e.g., suggesting a mouse component Thariq hadn't considered).
  • ·Thariq mentions this could become a /interview skill, though productizing it is tricky since not every user wants to be interviewed.
command

/loop for continuous data

39:41
Create a slash loop, and then say every 20 minutes, check for new messages using get messages since, and do X.Thariq

Run a scheduled loop (e.g., every 20 minutes) that calls a since-timestamp fetch script and processes only new data.

  • ·Pair with a tight script like get-messages-since so the loop does nothing when there's no new data.
  • ·Example structure: every 20 minutes, check for new messages using get-messages-since, then invoke a process-messages skill.
  • ·Warning: can burn tokens if the script isn't tight.
  • ·For rapidly-changing, highly interrelated state (e.g., hospital data), a managed agent is suggested instead.
command

/simplify skill

29:20
/simplify, which is a skill that Claude reads your existing Git changes and tries to simplify them. It works pretty well at shrinking down unnecessary code.Thariq

A skill that reads existing git changes and tries to pare down unnecessary code.

  • ·Mentioned as Thariq's go-to when Claude writes more code than necessary.
  • ·Works against the current diff rather than the whole repo.
pattern

Programmatic verification scripts

17:24
If I can build a programmatic way of verifying that, then Claude will get better at doing that sort of verification. So write specific scripts to help with verifying things that Claude runs into often.Thariq

Give Claude domain-specific deterministic checks so it can verify its own work beyond generic linting or screenshots.

  • ·Generic linting is a starting point — push toward the most specific form of linting for the domain.
  • ·Remotion example: check that video frames don't overlap as a programmatic verification.
  • ·Playwright is useful but screenshots alone usually aren't enough information for Claude to act on.
  • ·For high-risk outputs (e.g., payments), build a testing environment where Claude iterates and writes tests before the real send.
feature

CRM skill (personal memory layer)

33:04
CRM. It stores contacts, to-dos, and events from reading my email plus iMessage. This is an example of creating another memory layer for Claude code.Thariq

An opinionated custom memory skill that ingests email and iMessage to maintain contacts, to-dos, and events.

  • ·Thariq mentions he's been working on open-sourcing it.
  • ·Runs on a loop: check for new messages/emails, then update contacts/to-dos/events.
  • ·Presented as an example of augmenting Claude's generic memory with opinionated structure via skills.
feature

Status report skill

23:01
Status report. Read Slack and build a weekly status report on what I did this week. So I can just send that to my manager or just even post it on my personal Slack channel.Thariq

A skill that reads Slack and builds a weekly status report to send to a manager or post in a personal channel.

  • ·One of several business-workflow skills Thariq maintains.
  • ·Other examples: a Twitter DM/notification reader that correlates bug reports with Slack, and a demo-video skill that reads new feature code and builds a Remotion demo.
feature

.claude/projects transcript access

25:14
All your conversations exist in .claude/projects. Claude can read those files. You can prompt Claude to read it and give you tips, but you need to be very specific.Thariq

Claude can read its own conversation history stored in .claude/projects to audit workflows and propose skills.

  • ·Use it to ask Claude for tips on how you could work better — but prompt very specifically.
  • ·Can be asked to propose new skills, though output tends to be noisy with low-value suggestions.
  • ·Also usable to count how often each skill triggers when auditing a setup.
pattern

Dynamic hooks via skills

54:39
Once you run this skill, then Claude will get this hook that's inserted, and you can insert it after every turn or after every few turns.Thariq

A skill can install a hook that injects reminders every turn or every few turns for the remainder of a session.

  • ·Example given: a /safe skill that, once invoked, reminds Claude each turn it's doing something dangerous and must double-check.
  • ·Referenced in Thariq's skills article as a way to insert reminders dynamically rather than statically in claude.md.
rule

Opus 4.7 claude.md migration

42:03
Opus 4.7 takes instructions more literally. So sometimes when you ask it to do something, if you find Opus 4.7 is over-triggering on something, usually means you need to edit your Claude.md to give it a little bit more flexibility.Thariq

Opus 4.7 takes instructions more literally, so over-triggering usually means claude.md needs relaxed wording.

  • ·Caps-locked 'never do this' style rules can cause over-indexing on Opus 4.7.
  • ·Anthropic has published an Opus 4.7 prompt guide and a migration skill to point at existing skills.
  • ·Audit pattern: ask Claude to read .claude/projects and check how often each skill triggers.
pattern

Skills over role-based sub-agents

46:06
Skills over agents, and ask agents to combine skills... instead of a software engineering agent, you have debugging skill, code quality skill, maybe feature design/interview skill.Thariq

Prefer composable skills (debugging, code quality, feature design) over role-prompted sub-agents like 'front-end agent'.

  • ·Role prompts like 'you're an expert designer' are largely obsolete — Claude doesn't need to be told to write good code.
  • ·Verbose agent instructions over-constrain Claude, especially on Opus 4.7.
  • ·Preferred pattern: main Claude Code spawns sub-agents that assemble skills at the right moment for the task.
feature

Claude Design vs Claude Code

35:16
The benefit of Claude Design is that it has a lot of these small design things sprinkled in... So the designs tend to look better out of the box, but when you do it in Claude code, it has a little bit more context.Thariq

Claude Design is an opinionated wrapper around the model with strong design defaults; Claude Code has more code-base context.

  • ·Claude Design connects a GitHub repo and ingests a design system similarly to the HTML-porting pattern shown in the demo.
  • ·Defaults tend to look better out of the box thanks to Nate and the design team.
  • ·Claude Code is preferred when you want to point at a specific code base; Claude Design is harder to steer at arbitrary repos.
  • ·Video work in Claude Design was inspired by Thariq showing Nate how Anthropic's launch videos are built.
resource

Remotion for launch-style videos

9:15
All our launch videos are generated by Cloud Code. And we use this library called Remotion.Thariq

Anthropic's launch videos are generated by Claude Code using the Remotion library — pairs well with a pre-built design-system HTML.

  • ·The live build set up a Remotion project with a custom player, terminal component, cursor, and button showcase.
  • ·Jason suggests builders use this approach for hackathon demo videos at the end of the week.
  • ·Combining design-system HTML + Remotion is what makes Claude-generated videos match Anthropic's polish.
resource

Managed Agents follow-up session

6:44
We're going to have a live session tomorrow specifically on Managed Agents as well.Jason Bigman

Michael Cohen is running a dedicated Managed Agents session the morning after, West Coast time.

  • ·Bring Managed Agents questions there — including the clinic-style continuous-state use case Thariq deferred.
  • ·Session video will be posted in the Discord resources channel for other time zones.

Surprising & unexpected

5 items
Conversation history lives in .claude/projects as files Claude itself can read — enabling self-audits of how often skills trigger.
25:14

All your conversations exist in .claude/projects. Claude can read those files. You can prompt Claude to read it and give you tips.

A personal CRM skill reads email and iMessage on a loop and updates contacts, to-dos, and events — a custom memory layer beyond Claude's default.
33:17

It stores contacts, to-dos, and events from reading my email plus iMessage… creating another memory layer for Claude Code.

Dynamic hooks can be created by skills — e.g., a /safe skill that, once run, injects a reminder every turn or few turns.
54:42

Let's say you wanted /safe where every turn Claude gets reminded it's doing something dangerous. Once you run this skill, Claude gets this hook inserted.

For Remotion specifically, programmatic verification can check whether video frames overlap — deterministic checks beyond Playwright screenshots.
18:00

In Remotion a lot of it is around video frames. How do I make sure different frames are not overlapping? If I can build a programmatic way of verifying that, Claude will get better.

A /loop running every 20 minutes paired with a 'get-messages-since-last-fetch' script is the suggested pattern for continuous data ingestion in Claude Code.
39:47

Create a /loop. Every 20 minutes, check for new messages using get-messages-since, and do X. Maybe use the process-messages skill.

Reading between the lines

4 readings

Opus 4.7’s speculative reads of the transcript — subtext and signals, not statements from the speakers.

The repeated mention that 'not everyone wants to be interviewed' could hint at interview-style planning being considered for product but held back.
28:19

We've been trying to figure out the right way to put this in product, but it's a little bit tricky because not everyone wants to be interviewed.

Framing claude.md maintenance as 'someone's job at large companies' suggests this drift problem is still unsolved tooling-wise.
41:42

At large companies, this is someone's job, honestly, to make sure that the claude.md, or everything is up to date.

Pushback on role-based sub-agents as 'rigid' and 'over-constraining' could reflect internal learning that verbose agent prompts degrade Opus 4.7 specifically.
47:35

If you have a lot of instructions for the agent, you sort of over-constrain Claude… especially to Opus 4.7.

The recurring 'we probably need to write an article about this' on verification suggests official guidance is still being drafted.
55:36

We definitely need to make a verification post or article, I think.

Questions & answers

11 exchanges
Since you can build so much, how do you decide not to build certain things?
19:01
Talk to users directly, watch them use it over their shoulder, and hold conviction while trying to disprove your own hypothesis rather than testing many at once.
asked by UnicornFairy
What custom skills have you built, and do you ship them on the marketplace?
22:45
Mostly unshipped personal workflow skills: reading Twitter DMs for bug signals, a Slack weekly status report, and a demo-video skill that reads new feature code and builds a Remotion demo.
asked by Ayush
Can Claude review repeated work and auto-convert it into skills via a feedback loop?
24:32
Claude can read conversations in .claude/projects and propose skills, but output is often noisy; treat it as a human-in-the-loop suggestion rather than automation.
asked by Nomad
How do you prevent Claude from writing more code than necessary?
28:40
Use plan mode and review carefully, try a /simplify skill that reads git changes to shrink code, keep claude.md tight, and be highly specific in prompts.
asked by Vincenzo
How do tools, skills, memory, and the workflow engine relate?
31:25
Skills are the primary extension point; MCPs and agents supplement. Memory can be rolled via a skill — for example, a CRM skill that updates contacts, to-dos, and events from email and iMessage.
asked by Sim
How does Claude Design differ from Opus 4.7 with a well-defined prompt skill?
37:20
Claude Design is a wrapper with an opinionated workflow for ingesting design systems and strong defaults from designers like Nate, but Claude Code gives more code-base context.
asked by Prerak
For an agent reevaluating state on new information, what pattern fits?
37:23
For clinic-style rapidly-changing interrelated data, a managed agent likely fits better than Claude Code, which is a coding harness assuming slower-moving context.
asked by Rocket
Should agents in Claude Code get specific roles like front-end, back-end, ML?
45:31
Prefer skills over role-based agents — e.g., debugging skill, code quality skill. Over-constraining role prompts, especially with Opus 4.7, tends to backfire.
asked by Sri
How do you build a verification script that tests outputs against hard infrastructure constraints before sending?
48:30
Create a testing environment where Claude can iterate and write tests; only after passing verification should it send a real payload. Specifics depend on the task.
asked by Mao
How do you deal with Claude repeating the same mistakes?
50:46
Check if the ask is out of distribution or arbitrary style; check claude.md for conflicts; encode rules as linting where possible; use hooks to insert reminders dynamically.
asked by Gil Caspi
How do you keep claude.md conventions from going stale while building?
41:15
Revisit with each model — Opus 4.7 takes instructions more literally. Audit how often skills trigger, and use the Opus 4.7 prompt guide and migration skill on existing setups.
asked by mboss37

Quotes worth saving

I've been using HTML as a very portable way of essentially Claude compresses all of this information into an HTML file, and then you can use it in a different project.
Thariq15:29
Frames the core trick behind the live build — a reusable design-system artifact.
This is sort of my version of planning — I know there's some vagueness in my prompt, but I want Claude to help me think through it, so I ask it to interview me.
Thariq27:47
Captures an alternative to plan mode using ask-user-a-question.
It's easier to work what's in distribution with Claude than to work out of distribution.
Thariq52:20
Summarizes his mental model for choosing languages, styles, and conventions.
Opus 4.7 takes instructions more literally. If you find it over-triggering, usually it means you need to edit your claude.md to give it more flexibility.
Thariq42:06
Concrete migration guidance for existing claude.md files.
Skills over agents, and ask agents to combine skills. A lot of the 'you're an expert designer' prompting has gone away.
Thariq46:06
Direct steer away from role-prompted sub-agents toward composable skills.

Full transcript

996 captions
0:23Hey everyone, it's me, Jason Bigman again from the community team at
0:27Anthropic.
0:28Really excited to have our first live session with you all of the
0:32hackathon, which by the way, it's been so cool to see in the Discord all
0:36of you guys chatting, sharing with each other, helping each other out.
0:39So thank you all for being already super involved participants of this
0:42hackathon. But this first session, we are very
0:46lucky to have Thariq from the Claude Code team with us here today.
0:50You guys probably know him from Twitter or from elsewhere.
0:53Maybe you've been
0:54DM'd with him or been in the comments with him.
0:57But Thariq is going to be walking us through a live build
1:01on Claude Code today.
1:03Throughout this, I'm going to be in the chat in the Discord.
1:06So if you guys have questions for Thariq, things you want to ask
1:10him about, whatever, post it there.
1:12I'll be keeping a running log, and here and there, I'll throw some questions over
1:15to Thariq so we can make this interactive.
1:18But otherwise, Thariq, thanks for joining us.
1:22Yeah, of course. Hey, guys.
1:25Yeah, it's Thariq. I think I joined for the last hackathon.
1:28We did a build week, or
1:31not a build week, a build hour.
1:34And,
1:35yeah, I think that the way I like to do these are pretty interactive.
1:39I don't plan out this detailed demo, and I
1:43think it's more just seeing thought process on the fly of how
1:47would we approach a situation.
1:50I think I also love to take questions from the audience on just
1:53how things--
Notes generated with Claude Opus 4.7